如何在NuxtLink中为含查询参数的路由添加激活类？

方法1：用exact属性搞定简单场景 #

直接给NuxtLink加上exact属性，只有当URL完全匹配（包括所有query参数）时，才会触发激活类。示例代码：

<NuxtLink to="/blog/posts" exact>全部文章</NuxtLink>
<NuxtLink to="/blog/posts?page=1" exact>第1页</NuxtLink>
<NuxtLink to="/blog/posts?page=2" exact>第2页</NuxtLink>

要是你有多个筛选参数（比如?page=1&category=vue），这个方法依然管用，只要保证每个链接的query完全一致就行。

方法2：自定义激活判断逻辑（适配复杂场景） #

如果是动态生成的query参数，或者需要更灵活的匹配规则，就用custom属性结合手动判断来控制激活状态：

<NuxtLink 
  :to="{ path: '/blog/posts', query: { page: 1 } }"
  custom
  v-slot="{ navigate, isExactActive }"
>
  <a 
    @click="navigate"
    :class="{
      'router-link-active': isExactActive,
      'router-link-exact-active': isExactActive
    }"
  >
    第1页
  </a>
</NuxtLink>

这里直接复用原有的激活类，但只在完全匹配（包含所有query参数）时才添加。

要是需要针对特定query参数做判断，也可以自己写逻辑：

<NuxtLink 
  :to="{ path: '/blog/posts', query: { page: 1, category: 'vue' } }"
  custom
  v-slot="{ navigate }"
>
  <a 
    @click="navigate"
    :class="{
      'router-link-active': $route.path === '/blog/posts' && $route.query.page === '1' && $route.query.category === 'vue',
      'router-link-exact-active': $route.path === '/blog/posts' && $route.query.page === '1' && $route.query.category === 'vue'
    }"
  >
    Vue分类第1页
  </a>
</NuxtLink>

方法3：全局修改路由匹配配置 #

想让所有带query参数的路由都严格匹配，就在Nuxt配置文件（nuxt.config.js/nuxt.config.ts）里修改路由规则：

export default {
  router: {
    linkExactActiveClass: 'router-link-exact-active',
    linkActiveClass: 'router-link-active',
    extendRoutes(routes, resolve) {
      routes.forEach(route => {
        // 给目标路由开启严格匹配
        if (route.path === '/blog/posts') {
          route.exact = true
        }
      })
    }
  }
}

注意：这个设置会全局影响该路由下的所有NuxtLink，按需调整就行。

内容的提问来源于stack exchange，提问作者Chantal