Vue - nested routes with same name?

Question

I have two parent routes, each I'd like to have a child route called 'Dashboard' for consistency.

{
    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 doesn't like this, and I also can't find a way to specify the dashboard I want using name rather than path. I use the name in the DOM as a heading so the user knows where they currently are. Being on the main dashboard also is visually different from a workspace dashboard.

Is my approach wrong? I know I could maybe use the metadata tag in the route to create a DisplayName: 'Dashboard' and use that. Just want to check if there is a way.

Answer 1

I believe name has to be unique across all routes otherwise it would not be possible to use this: router.push({ name: 'Dashboard'})

Just name your Dashboard routes differently...