Vue 3 路由器 - 路由器链接活动不工作

Posted 2023-02-22

【中文标题】Vue 3 路由器 - 路由器链接活动不工作

【英文标题】：Vue 3 router - router-link-active not working

【发布时间】：2021-07-26 05:42:48

【问题描述】：

在带有路由器 4 的 vue 3 中，router-link-active 类不再适合我。如果你们在同一页面上，则该类与router-link-exact-active 一起出现，但不在任何子页面上。

例如链接 <router-link :to=" name: 'test'">test</router-link> 获取的是 /test 上的 router-link-active 和 router-link-exact-active 类，但 /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

谢谢，任何想法或建议

【参考方案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
      
    ]
  
]

【讨论】：

这让我发疯了，谢谢你的链接