Vue router not adding the router-link-exact-active class when it is an exact match

Question

Vue router (4) not adding the router-link-exact-active class when it is an exact match. It does add the router-link-active class but this means that there will be several active classes with some routes and dashboard will always be active due the /en part. I tried to add the exact attribute but this does not work.

router/index.js

const router = createRouter({
    history: createWebHistory(),
    routes: [
         {
             path: `/en`,
             component: () => import('../Pages/Base.vue'),
             children: [
             { 
                 path: '/en', name: 'dashboard', component: page('Users.vue'),
             },
             { 
                 path: 'users', name: 'users', component: page('Users.vue'),
             },
             { 
                 path: 'users/settings', name: 'users.settings', component: page('UsersSettings.vue'),
             },
             ]
         },
    ] 
});

// link component (works)

<router-link :to="getToValue">
    <slot />
</router-link>

Answer 1

Add linkExactActiveClass property

    const router = createRouter({
    history: createWebHistory(),
    linkExactActiveClass: 'active',
    routes: [
         {
             path: `/en`,
             component: () => import('../Pages/Base.vue'),
             children: [
             { 
                 path: '/en', name: 'dashboard', component: page('Users.vue'),
             },
             { 
                 path: 'users', name: 'users', component: page('Users.vue'),
             },
             { 
                 path: 'users/settings', name: 'users.settings', component: page('UsersSettings.vue'),
             },
             ]
         },
    ] 
});