如何为带有参数的链接设置 nuxt-link 的活动类？

Question

我的代码是这样的。

但是，在此代码中，“/”在 domain.com/?standalone=true 时不会变为活动类。

 <nuxt-link to="/" class="navBotton" exact-active-class="active" ><span>Home</span>
</nuxt-link>
<nuxt-link to="/post" class="navBotton" active-class="active" ><span>Post</span>
</nuxt-link>
<nuxt-link to="/about" class="navBotton" active-class="active" ><span>About</span>
</nuxt-link>

我如何解决它？

当我删除 exact 时，它会在所有页面上变为活动类。

---

谢谢你的一些回答。

无论参数如何，我都找到了一种在“/”时激活的方法。这是代码。

 <nuxt-link
    to="/"
    class="navBotton home"
    :class="{'active': isRouteActive }"
    exact-active-class="active"
>

 computed: {
    isRouteActive: function() {
      if (this.$nuxt.$route.path=="/") {
        return true;
      } else {
        return false;
      }
    }
  }

原文由 h.yuta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在通常称为 nuxt.config.js 有一个名为路由器的对象的属性：

 router: {
    linkActiveClass: 'your-custom-active-link',
    linkExactActiveClass: 'your-custom-exact-active-link',
  }

然后在你的CSS中：

 .your-custom-active-link {
  /* styles here */
}
.your-custom-exact-active-link {
  /* styles here */
}

希望能帮助到你！

原文由 kengres 发布，翻译遵循 CC BY-SA 4.0 许可协议