Vue - 具有相同名称的嵌套路由？

Question

我有两条 parent 路线，为了保持一致性，我希望每条路线都有一条名为 'Dashboard' 的 child 路线。

{
    path: '/app',
    name: 'App',
    component: () => import('../views/App.vue'),
    children: [
        {
            path: 'dashboard',
            name: 'Dashboard',
            component: () => import('../components/App/Views/Dashboard')
        }, 
    ]
}, {
    path: '/workspace/:id',
    name: 'Workspace',
    component: () => import('../views/Workspace.vue'),
    children: [
        {
            path: 'dashboard',
            name: 'Dashboard',
            component: () => import('../components/Workspace/Views/Dashboard')
        },
    ]
},

Vue 不喜欢这样，而且我也找不到使用 name 而不是路径来指定我想要的仪表板的方法。我使用 DOM 中的名称作为标题，以便用户知道他们当前所在的位置。在主仪表板上也与工作区仪表板在视觉上不同。

我的做法是不是错了？我知道我可以在路由中使用元数据标记来创建 DisplayName: 'Dashboard' 并使用它。就是想看看有没有办法。

Answer 1

我相信 name 必须在所有路线中都是唯一的 否则将无法使用此：router.push({ name: 'Dashboard'})

只需以不同的方式命名您的 Dashboard 路线...

Vue - 具有相同名称的嵌套路由？

Vue - nested routes with same name?

vue.js

vue-router