如何为带参数的链接设置 nuxt-link 的 active-class？

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;
      }
    }
  }

Answer 1

在通常称为

nuxt.config.js

的 nuxt 配置文件中，有一个名为 router 的对象的属性：

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 */
}

希望有帮助！

Answer 2

我也有同样的问题。像这样解决它：

<b-link :class="{'nuxt-link-active': isRouteActive(id) }" :to="id + '?someParams=true'">

方法：

methods: {
    isRouteActive(id) {
      if (this.$route.path.includes(id)) {
        return true
      } else {
        return false
      }
    },
    log() {
      console.log(this.categories)
    }
}

但是，我想知道是否有一种本地方法可以做到这一点......

Answer 3

对于 nuxtjs 3，你应该这样配置；

router: {
    options: {
      linkActiveClass: "active",
      linkExactActiveClass: "exact-active"
    }
  }

Answer 4

将课程风格化

.nuxt-link-active

并且会自动工作。

参考：https://nuxtjs.org/examples/routing/active-link-classes/

Answer 5

[Nuxt 3] 要自定义活动链接类，您可以使用路由器选项在 nuxt.config.ts （或 nuxt.config.js）文件中配置它们。例如：

export default defineNuxtConfig({
  router: {
    options: {
      linkActiveClass: "active",
      linkExactActiveClass: "exact-active",
    },
  },
})

这有什么作用：

如果当前路由是确切路由或该路由的子路由，则

linkActiveClass

（示例中的“活动”）适用于链接。例如，如果您有一个指向 /about 的链接，并且您当前位于 /about/team 上，则该链接仍将收到活动类。

linkExactActiveClass

（示例中的“完全活动”）仅在当前路由与链接的路由完全匹配时适用。使用相同的示例，如果您的链接是 /about，则只有当您完全位于 /about 上时，它才会处于完全活动状态，而不是位于 /about/team 上。