Vue-router v4:嵌套路由与父路由不匹配

Question

在这个项目中，我使用Vue 3 (vite)和Vue-router v4，并试图使路由正常工作。

我试图导航到/escape-rooms/my-escape-room，但我的菜单中的<router-link>对象没有得到类.router-link-active。在主要路线/escape-rooms中确实如此。我不确定我做错了什么，因为文档中说嵌套路由会自动"激活"这个类的任何父链接。

我有这个路由列表:

const routes = [
{path: '/', name: 'main', component: Home},
{path: '/escape-rooms', name: 'escape-rooms', component: EscapeRooms},
{path: '/escape-rooms/:urlName', name: 'escape-room-item', component: EscapeRooms, props: true},
{path: '/contact', name: 'contact', component: Contact}      
]

这是我的菜单布局的一部分:

<div class="menu">
<div class="menuitem">
<router-link to="/contact">
contact
</router-link>
</div>
<div class="menuitem">
<router-link to="/escape-rooms">
escape-rooms
</router-link>
</div>
</div>

Answer 1

对于遇到同样问题的人。阅读本文:https://github.com/vuejs/rfcs/blob/master/active-rfcs/0028-router-active-link.md#unrelated-but-similiar-routes