Vue-router: How can I use named routes within a data object?

Question

I am using vue-router (and vuetify) to build my website. I have everything working great, but I would like to understand how to use the named routes instead of a path.

Here is a partial of my template as follows:

<v-list-item v-else :key="item.text" :to="item.to" link>
    <v-list-item-action>
        <v-icon>{{ item.icon }}</v-icon>
    </v-list-item-action>
    <v-list-item-content>
        <v-list-item-title>
            {{ item.text }}
        </v-list-item-title>
    </v-list-item-content>
</v-list-item>

...

Here is my data object:

data: () =>({
    items: [
        {icon: 'mdi-home', text: 'Home', to: '/'},
        {icon: 'mdi-view-dashboard', text: 'Dashboard', to: '/dashboard'},
        {
            icon: 'mdi-chevron-up', 'icon-alt': 'mdi-chevron-down',
            text: 'Locations',
            model: false,
            children: [
                {
                    icon: 'mdi-map-marker',
                    text: 'Location One',
                    to: {name: 'location.show', params: {id: 1}} . // works perfectly
                },
                {
                    icon: 'mdi-map-marker',
                    text: 'Location Two',
                    to: {name: 'location.show', params: {id: 2}} . // works perfectly
                },
            ],
        },
    ],
}),

This is what I am trying to do:

{icon: 'mdi-view-dashboard', text: 'Dashboard', to: {name: 'dashboard'},

Instead of:

{icon: 'mdi-view-dashboard', text: 'Dashboard', to: '/dashboard'},

However, when I use the named route, Vuetify is applying the active class to the element. So, now all of my nav items are active.

How can I use the named route instead of a path? Thank you for any suggestions!

EDIT

Here is what my vue-router looks like:

{
    path: "/dashboard",
    name: "dashboard",
    component: () =>
        import(/* webpackChunkName: "dashboard" */ "../views/admin/Dashboard"),
    meta: {requiresAuth: true}
},
{
    path: "/location/:id",
    name: "location.show",
    component: () =>
        import(/* webpackChunkName: "location.show" */ "../views/admin/location/Show"),
    meta: {requiresAuth: true},
    props(route) {
        const props = {...route.params};
        props.id = +props.id;
        return props; // returns the param as a string
    },
},

{icon: 'mdi-view-dashboard', text: 'Dashboard', to: {name: 'dashboard'} have you check this? — Manjeet Thakur

Qonvex620 Qonvex620 · Accepted Answer · 2020-01-19T06:26:39

First of all, make sure that your route name is existing. Like below

export default [
    {
        path: '/admin/dashboard',
        name: 'dashboard',
        component: dashboard,
        meta: {
            title:'Dashboard'
        }
    },
]

So, in your items you can already use this one.

 {icon: 'mdi-home', text: 'Home', to: {name: 'dashboard'}},

Vue-router: How can I use named routes within a data object?

2 Answers