Vue -router: Как я могу использовать именованные маршруты в объекте данных?

Question

Я использую vue -router (и vuetify) для создания моего сайта. У меня все работает отлично, но я хотел бы понять, как использовать именованные маршруты вместо пути.

Вот часть моего шаблона следующим образом:

<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>

...

Вот мой объект данных:

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
                },
            ],
        },
    ],
}),

Вот что я пытаюсь сделать:

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

Вместо:

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

Однако, когда я использую названный В маршруте Vuetify применяет активный класс к элементу. Итак, теперь все мои элементы навигации активны.

Как я могу использовать именованный маршрут вместо пути? Спасибо за любые предложения!

РЕДАКТИРОВАТЬ

Вот как выглядит мой vue -раут:

{
    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
    },
},

Answer 1

Вы должны добавить exact -prop к вашему элементу списка. Таким образом, он будет применять только активный класс к точной ссылке.

<v-list-item v-else :key="item.text" :to="item.to" link exact>
    <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>

https://router.vuejs.org/api/#exact

Answer 2

Прежде всего, убедитесь, что название вашего маршрута существует. Как показано ниже

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

Итак, в ваших предметах вы уже можете использовать этот.

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