Nuxt3子路由导航激活类问题：/users/groups未激活父导航

不用调整路由结构，直接通过导航链接的配置就能搞定，分两种场景说明：

用NuxtLink组件的情况 #

如果你的导航用的是Nuxt官方的<NuxtLink>，默认逻辑是：只要当前路由路径以目标链接的路径开头，就会自动添加激活类（默认类名是nuxt-link-active）。如果没生效，检查两点：

• 别给<NuxtLink>加exact属性，加了就只会精确匹配/users，子路由不会触发激活。
• 要是你自定义了激活类名，直接通过active-class指定即可，示例：

<NuxtLink to="/users" active-class="your-active-class">
  用户中心
</NuxtLink>

这样不管是在/users还是/users/groups路由下，这个链接都会带上你设置的激活类。

自定义导航链接的情况 #

如果是自己写的<a>标签或其他自定义导航元素，手动判断当前路由路径是否以/users开头，动态添加激活类就行：

<template>
  <a 
    :class="{ 'active': $route.path.startsWith('/users') }" 
    href="/users"
  >
    用户中心
  </a>
</template>

或者用组合式API的写法：

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
const isUsersActive = computed(() => route.path.startsWith('/users'))
</script>

<template>
  <a :class="{ 'active': isUsersActive }" href="/users">用户中心</a>
</template>

补充说明 #

如果你的路由是嵌套结构（比如/users.vue作为父页面，内部包含<NuxtPage>，/users/groups是子路由），上述方法依然生效，不需要额外调整路由结构。

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