Vue 3结合Vue Router 4使用时router-link-active类未在子路由页生效

核心现象 #

在Vue 3搭配Vue Router 4的项目中，会出现以下类名异常表现：

• 当访问与<router-link>指向路径完全匹配的地址时，链接元素会正常挂载router-link-active、router-link-exact-active两个类名
• 当访问路径存在字符串前缀关联、但属于其他独立平级路由的地址时，两个类名均不会挂载到对应链接上

对应场景示例：

<!-- 指向name为test路由的链接 -->
<router-link :to="{ name: 'test' }">test</router-link>

当路径为/test时类名正常生效，路径为/test/2时类名全部失效。

根本原因 #

这是对Vue Router类名匹配机制的常见认知误区导致的，问题核心和路由配置结构直接相关：

1. router-link-exact-active的触发逻辑：完全匹配当前路由记录时触发，这点和大多数开发者的认知一致
2. router-link-active的触发逻辑：并不是基于路径字符串的前缀匹配，而是基于路由配置的父子嵌套关系触发。只有当当前访问的路由记录，和<router-link>指向的路由记录存在直接的父子嵌套关联时，才会为对应链接挂载这个类。

出现异常的配置中，两个带路径前缀关联的路由是完全平级的独立路由，没有建立嵌套父子关系：

const routes = [
  {
    path: '/test',
    name: 'test',
    component: Test
  },
  // 和上面的test路由是平级独立配置，无嵌套关联
  {
    path: '/test/2',
    name: 'test-2',
    component: Test2
  }
]

这种结构下，访问/test/2时路由匹配结果只会命中test-2这一条独立记录，根本无法关联到平级的test路由，自然不会为指向test的链接挂载router-link-active类。

很多开发者会误以为只要路径字符串有前缀包含关系，类名就会自动生效。这是因为使用嵌套路由时，父路由路径本身就是子路由路径的前缀，自动关联的效果和字符串前缀匹配的视觉表现完全一致，才产生了“基于字符串前缀判断”的误解。

可落地解决方案 #

方案1：调整为标准嵌套路由结构 #

把原平级的/test/2路由挪到/test路由的children配置中，建立明确的父子路由关联：

const routes = [
  {
    path: '/test',
    name: 'test',
    component: Test,
    children: [
      {
        // 子路由路径不要加开头的斜杠，避免被识别为根路径
        path: '2',
        name: 'test-2',
        component: Test2
      }
    ]
  }
]

调整完成后，访问/test/2时路由匹配结果会同时命中test、test-2两条记录，指向test的链接会自动挂载router-link-active类，指向具体子路由的链接会同时挂载两个类名，完全符合预期。

方案2：自定义匹配规则（不调整路由结构场景） #

如果因为业务逻辑限制必须保留平级路由结构，可以通过router-link的自定义插槽能力，手动扩展激活判断逻辑：

<router-link
  to="/test"
  custom
  v-slot="{ navigate, isActive }"
>
  <a
    :class="{
      'router-link-active': isActive || $route.path.startsWith('/test')
    }"
    @click="navigate"
  >
    test
  </a>
</router-link>

这种方式可以跳过默认的层级匹配规则，自行根据路径前缀判断链接激活状态，适合路由结构不便调整的场景。

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