title: Vue-router v4: Nested route not matching with parent route
body: <p>In this project I'm using Vue 3 (vite) and Vue-router v4 and trying to make routing work correctly.</p>
  <p>I am trying to navigate to <code>/escape-rooms/my-escape-room</code> but the <code>&lt;router-link&gt;</code> object inside my menu does not get the class <code>.router-link-active</code>. In the main route <code>/escape-rooms</code> 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.</p>
  <p>I have this list of routes:</p>
  <pre><code>    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}      
     ]
  </code></pre>
  <p>This is de  part of my menu layout:</p>
  <pre><code>     &lt;div class=&quot;menu&quot;&gt;
          &lt;div class=&quot;menuitem&quot;&gt;
            &lt;router-link to=&quot;/contact&quot;&gt;
              contact
            &lt;/router-link&gt;
          &lt;/div&gt;
          &lt;div class=&quot;menuitem&quot;&gt;
            &lt;router-link to=&quot;/escape-rooms&quot;&gt;
              escape-rooms
            &lt;/router-link&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>