在使用 router-link-active 设置链接激活时CSS类名时,发现在例如 /member/order 和 /member/order/:id 这两个都包含 /member/order的路由路径,其中后者无法和前者一样设置类名,也就是 router-link-active 加不上
在vue2中可以实现,因为 router-link-active 本就不是精确匹配,只要路由路径包含router-link组件的to属性值,就可以在链接激活时设置CSS类名
但是在vue3中,无法实现
在查看官方回答后,该属性有新的改变
也就是说,如果在Router v4中,如果想使用 router-link-active ,路由路径包含需要包含router-link组件的to属性值 且 需要路由嵌套关系。
原路由:
{ path: '/member', component: MemberLayout, children: [ { path: '/member', component: MemberHome }, { path: '/member/order', component: MemberOrder }, { path: '/member/order/:id', component: MemberDetail } ] }
更改后:
{ path: '/member', component: MemberLayout, children: [ { path: '/member', component: MemberHome }, // { path: '/member/order', component: MemberOrder }, // { path: '/member/order/:id', component: MemberDetail } { path: '/member/order', // 创建一个RouterView容器形成嵌套关系 component: { render: () => h(<RouterView />) }, children: [ { path: '', component: MemberOrder }, { path: ':id', component: MemberDetail } ] } ] }