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

In this project I'm using Vue 3 (vite) and Vue-router v4 and trying to make routing work correctly.

I am trying to navigate to /escape-rooms/my-escape-room but the <router-link> object inside my menu does not get the class 'router-link-active'. In the main route /escape-rooms it does. I'm not sure what I'm doing wrong because the documentation states that nested routes automatically 'activate' any parent links with this class.

I have this list of routes:

    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}      
   ]

This is de part of my menu layout:

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

CodePudding user response：

For anyone stumbling on the same issue. follow this article: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0028-router-active-link.md#unrelated-but-similiar-routes