vue.js - 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