Vue-router v4 跳转子路由时父级router-link未添加.router-link-active问题

问题根因 #

你当前的路由配置为平级结构，/escape-rooms和/escape-rooms/:urlName是两个独立的平级路由，不属于Vue Router官方定义的「嵌套路由」场景，因此子路径匹配时不会自动触发父级路由链接的激活类。

解决方案 #

方案1：修改为嵌套路由结构（推荐，符合官方设计规范） #

将参数路由作为子路由配置到父路由的children字段中：

const routes = [
  { path: '/', name: 'main', component: Home },
  {
    path: '/escape-rooms', 
    name: 'escape-rooms', 
    component: EscapeRooms,
    // 嵌套子路由配置
    children: [
      {
        path: ':urlName', 
        name: 'escape-room-item', 
        component: EscapeRooms,
        props: true
      }
    ]
  },
  { path: '/contact', name: 'contact', component: Contact }      
]

注意：父路由对应的EscapeRooms组件模板中需要添加<router-view>标签，用于渲染子路由内容。

方案2：不改路由结构，手动控制激活类 #

如果不需要嵌套路由结构，可以直接为router-link添加自定义类判断逻辑：

<router-link 
  to="/escape-rooms" 
  :class="$route.path.startsWith('/escape-rooms') ? 'router-link-active' : ''"
>
  escape-rooms
</router-link>

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