Vue 3 路由器-路由器-link-活动不工作

Question

在带有路由器 4 的 vue 3 中，class router-link-active 对我来说不再有效了。如果您与 router-link-exact-active 在同一页面上，则会出现 class，但不会出现在任何子页面上。

例如 link <router-link :to="{ name: 'test'}">test</router-link> 在 /test 上得到 classes router-link-active 和 router-link-exact-active但其中 none 个在 /test/2

{
    path: '/test',
    name: 'test',
    component: Test
},
{
    path: '/test/2',
    name: 'test-2',
    component: Test2
},

真实例子： https://codesandbox.io/s/vue-router-4-reproduction-forked-zcb7y

感谢任何想法或建议

Answer 1

我错过了https://github.com/vuejs/rfcs/blob/master/active-rfcs/0028-router-active-link.md#unrelated-but-similiar-routes，有点隐蔽。显示的 RouterView 解决方法工作正常。这是我的例子：

import { h } from 'vue'
import { RouterView } from 'vue-router'

const routes = [
  {
    path: '/test',
    component: { render: () => h(RouterView) },
    children: [
      { 
        path: '',
        name: 'test',
        component: Test
      },
      { 
        path: '2',
        name: 'test-2',
        component: Test2
      }
    ]
  }
]

Vue 3 路由器-路由器-link-活动不工作

Vue 3 router - router-link-active not working

vue.js

vue-router

vuejs3

vue-router4