Vue 3 router - router-link-active not working

Question

In vue 3 with router 4 the class router-link-active isn't working anymore for me. The class appears if u are on the same page, together with router-link-exact-active, but not on any subpages.

For example the link <router-link :to="{ name: 'test'}">test</router-link> get's the classes router-link-active and router-link-exact-active on /test but none of them on /test/2

{
    path: '/test',
    name: 'test',
    component: Test
},
{
    path: '/test/2',
    name: 'test-2',
    component: Test2
},

Real Example: https://codesandbox.io/s/vue-router-4-reproduction-forked-zcb7y

Thx, for any ideas or suggestions

Christopher Adels Christopher Adels · Accepted Answer · 2021-05-04T15:53:21

I missed https://github.com/vuejs/rfcs/blob/master/active-rfcs/0028-router-active-link.md#unrelated-but-similiar-routes, it's a bit hidden. The shown RouterView workaround works fine. Here's it for my example:

import { h } from 'vue'
import { RouterView } from 'vue-router'

const routes = [
  {
    path: '/test',
    component: { render: () => h(RouterView) },
    children: [
      { 
        path: '',
        name: 'test',
        component: Test
      },
      { 
        path: '2',
        name: 'test-2',
        component: Test2
      }
    ]
  }
]

Vue 3 router - router-link-active not working

1 Answers