router-link-active not applied to matching routes

I am currently in my Vue learning journey. I have come across a situation where I need to show my link as active for matching route too. For example: I have route /programs which shows Program link as active without any issues but I also want /programs/view to set Program link as active as well. How do I do it in Vue Router?

These are my route definitions in router.js file

const routes = [
    { path: '/', component: Main, name: 'main', redirect: '/dashboard', children:
    [
        { path: '/dashboard', component: Dashboard, name: 'dashboard' },
        { path: '/programs', component: Programs, name: 'programs' },
        { path: '/programs/view', component: ViewProgram, name: 'view_program'},
        ...OTHER ROUTES
    ]
    },
    { path: '/login', component: Login, name: 'login', meta: {noAuth: true} },
    { path: '/:pathMatch(.*)*', redirect: '/dashboard'}
];

I searched and found that router-link-active class should be automatically applied to Program link when the route starts with /programs, but it is not working in my case. So, if I have a link with <router-link to="/programs"/>, shouldn't it get active class when clicked on a link with <router-link to="/programs/view" as well?

mvd

3 years ago

Level 48

@iamsubingyawali

Tried to create a children element in { path: '/programs', ?

https://router.vuejs.org/guide/essentials/nested-routes.html

Something like:

....
{ path: '/programs', component: Programs, name: 'programs' , children:
    [ { path: '/programs/view', component: ViewProgram, name: 'view_program'}]
},

iamsubingyawali

3 years ago

Level 1

@mvd Using nested children directly didn't work for me. Instead this works:

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

....
        { path: 'programs', component: { render: () => h(RouterView) }, children:
            [
                { path: '', name: 'programs', component: Programs},
                { path: 'view', name: 'view-program', component: ViewProgram }
            ]
        },
....

Reference: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0028-router-active-link.md#unrelated-but-similiar-routes

Please or to participate in this conversation.