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

Question

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

我正在尝试导航到 /escape-rooms/my-escape-room，但我的菜单中的 <router-link> 对象没有得到 class .router-link-active。在主要路线 /escape-rooms 中确实如此。我不确定我做错了什么，因为文档指出嵌套路由会自动 'activate' 任何父链接与此 class。

我有这个路线列表：

    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

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

Vue-router v4: Nested route not matching with parent route

vue.js

vue-router4