Nuxt 3/VueJS嵌套路由中router-link-active未作用于父级的问题

1. 修复导航父项激活状态问题 #

访问/test/nested时，指向/test的父级导航项没自动加上router-link-active类，你可以试试这两种方法：

方法一：利用NuxtLink默认匹配逻辑 #

确保父级NuxtLink的to属性设为/test，Nuxt默认会给所有以该路径开头的路由添加激活类。如果样式没生效，检查两点：

• CSS选择器是否正确（比如.router-link-active）
• 不要添加exact属性，该属性会强制精确匹配，仅在访问/test时才激活

方法二：手动控制激活状态 #

如果默认逻辑不满足需求，可通过useRoute钩子判断路径，动态添加类：

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

<template>
  <nav>
    <NuxtLink to="/test" :class="{ 'active': isTestActive }">Test</NuxtLink>
  </nav>
</template>

<style>
.active {
  color: red; /* 替换为你的激活样式 */
}
</style>

2. 解决子页面单独显示的问题 #

你之前尝试的pages/parent.vue搭配parent/child.vue属于嵌套路由结构，这种结构下父页面作为容器，必须通过<NuxtPage>渲染子页面，因此会同时显示父子内容。如果只想显示子页面，换个结构即可：

• 删除pages/parent.vue文件
• 直接创建pages/parent/index.vue（对应路由/parent）和pages/parent/child.vue（对应路由/parent/child）

这样配置后，访问/parent/child时只会渲染child.vue的内容，无需在父页面添加<NuxtPage>，同时导航中指向/parent的NuxtLink会在访问/parent/child时自动激活。

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