0

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.

EDIT

I have found a workaround by manually matching route and appending active class to the router link. But I still expect an easier way to do this.

In my Program link:

<router-link to="/programs" :class="{'router-link-active': $route.fullPath.match(/\b\programs/) }">
        <span>Programs</span>
</router-link>

I am using regex to match path pattern. So, every route that contains programs will get active class here.

iamsubingyawali
  • 193
  • 1
  • 2
  • 15

1 Answers1

0

dont u gotta do that in the component and not in the router?

take what i say with a grain of salt im

Barnum Taint
  • 28
  • 5
  • I didn't quite understand what you are saying. What do I do in the component? I have a common router-view where `/programs` and `/programs/view` route pages are rendered. So, if I have a link with ``, shouldn't it get active class when clicked on a link with ` – iamsubingyawali Sep 06 '22 at 17:00