Nuxt3：动态子路由无法触发active-class的问题求助

数据老陈

2026-7-6

解决NuxtLink仅主路由激活、子路由不激活的问题

问题根源：NuxtLink默认采用部分匹配规则，只要当前路由的路径以链接的to属性值开头，就会自动添加active-class，导致访问子路由时主路由的链接也被激活。

以下是两种可行的解决方案：

方案一：使用`exact`属性实现精确匹配

给动态路由对应的NuxtLink添加exact属性，仅当当前路径与目标路径完全一致时，才会应用激活类。

修改NavBar.vue中的动态路由链接部分：

<li v-for="route in routes" :key="route.name">
  <NuxtLink
    active-class="text-slate-700 font-medium"
    :to="`/flows/${route.slug}`"
    exact
    class="leading-none tracking-wide hover:underline hover:underline-offset-2"
  >{{ route.name }}
  </NuxtLink>
</li>

方案二：手动通过路由对象判断（更灵活）

如果需要自定义激活逻辑，可以借助vue-router的useRoute钩子获取当前路由，手动对比完整路径来绑定类。

首先在NavBar.vue中引入并使用useRoute：

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
const routes = defineProps(['routes'])
</script>

然后修改链接的class绑定逻辑：

<li v-for="routeItem in routes" :key="routeItem.name">
  <NuxtLink
    :class="[
      'leading-none tracking-wide hover:underline hover:underline-offset-2',
      route.fullPath === `/flows/${routeItem.slug}` ? 'text-slate-700 font-medium' : ''
    ]"
    :to="`/flows/${routeItem.slug}`"
  >{{ routeItem.name }}
  </NuxtLink>
</li>