Vue3嵌套路由场景下页面加载时RouterLink未自动激活类问题

这个问题的常见诱因有两个：一是父级路由没有配置默认子路由重定向，首次加载时路由未匹配到子路由项；二是RouterLink绑定的params参数在页面初始化阶段未完成赋值，导致初始生成的跳转路径和当前实际路径不匹配。

解决方法1：配置父路由默认重定向 #

在父路由配置中新增redirect字段，指定访问父路由时默认跳转的子路由，确保首次加载时就能命中对应的子路由规则：

{
  path: '/foo/:bar',
  name: 'foo',
  meta: { requiresAuth: true, title: 'Foo' },
  component: FooView,
  // 新增默认重定向配置
  redirect: { name: 'foo-first' },
  children: [{
    path: '1',
    name: 'foo-first',
    components: {
      'helper': FooFirst,
    },
  }, {
    path: '2',
    name: 'foo-second',
    components: {
      'helper': FooSecond,
    },
  }],
  props: true,
}

解决方法2：直接从路由实例拿参数避免延迟 #

如果你的data.bar是异步请求或者依赖其他组件状态才赋值的，初始阶段为空就会导致路径匹配失败，直接从$route对象读取路由参数即可保证初始路径的准确性：

<RouterLink
  :to="{ name: 'foo-first', params: { bar: $route.params.bar } }"
  class="px-1 py-4 text-base sm:text-sm"
  active-class="!text-red-600 !border-red-500"
>
  Foo First
</RouterLink>
<RouterLink
  :to="{ name: 'foo-second', params: { bar: $route.params.bar } }"
  class="px-1 py-4 text-base sm:text-sm"
  active-class="!text-red-600 !border-red-500"
>
  Foo Second
</RouterLink>

解决方法3：手动绑定激活状态兜底 #

如果以上方案都不生效，可以跳过RouterLink内置的激活判断逻辑，直接根据当前路由信息手动绑定激活类，稳定性更高：

<RouterLink
  :to="{ name: 'foo-first', params: { bar: $route.params.bar } }"
  class="px-1 py-4 text-base sm:text-sm"
  :class="{ '!text-red-600 !border-red-500': $route.name === 'foo-first' }"
>
  Foo First
</RouterLink>
<RouterLink
  :to="{ name: 'foo-second', params: { bar: $route.params.bar } }"
  class="px-1 py-4 text-base sm:text-sm"
  :class="{ '!text-red-600 !border-red-500': $route.name === 'foo-second' }"
>
  Foo Second
</RouterLink>

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