Root '/' route stays active in vuetify even when route is changed

Question

I've set my routes like so:

{
    path: '/',
    name: 'Dashboard',
    component: Dashboard
},
{
    path: '/page2',
    name: 'Page2',
    component: Page2
},

When the user visits my site dashboard should be the first route to load by default. This is currently happening. However my issue is within the Nav Drawer the button to the dashboard stays highlighted as active, see image:

The only way I can find to stop Dasboard from staying highlighted is to give a trailing name to the dashboard route, eg.

{
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard
},

But now this route won't load by default, unless there's a way to do this somewhere else?

Ari Ari · Accepted Answer · 2020-08-01T07:49:54

Found a work around, or possibly the way I'm meant to do it:

    {
        path: '/',
        name: 'Root',
        redirect: {name: 'Dashboard'}
    },

    {
        path: '/dashboard',
        name: 'Dashboard',
        component: Dashboard
    },

When the user hits the root it will redirect to the dashboard page. And now when they navigate to other pages Dashboard no longer stays active in the nav.

Root '/' route stays active in vuetify even when route is changed

1 Answers