Vue-router：如何在数据对象中使用命名路由？答案

【问题标题】：Vue-router: How can I use named routes within a data object?Vue-router：如何在数据对象中使用命名路由？
【发布时间】：2020-05-05 12:58:14
【问题描述】：

我正在使用 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-router 的样子：

{
    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'}你检查了吗？

标签： vue.js vuetify.js vue-router

【解决方案1】：

首先，确保您的路线名称已存在。如下所示

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

所以，在你的项目中你已经可以使用这个了。

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

【讨论】：

我遇到的是 vue-router 附加到 url 字符串而不是设置回来。例如：/dashboard`。导航到一个位置：/location/1。导航回仪表板：/location/1/dashboard
您可以删除路径中的起始“/”。
非常感谢@Qonvex620。您的回答帮助我回到了路线文件。我意识到我使用了不正确的名称。我会用解决方案更新我的问题。非常感谢！！
好的，谢谢，我希望你支持我的回答，谢谢:)。快乐编码

【解决方案2】：

您应该将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

【讨论】：