title: Vue - nested routes with same name?
body: <p>I have two parent routes, each I'd like to have a child route called 'Dashboard' for consistency.</p>
  <pre class="lang-js prettyprint-override"><code>{
      path: '/app',
      name: 'App',
      component: () =&gt; import('../views/App.vue'),
      children: [
          {
              path: 'dashboard',
              name: 'Dashboard',
              component: () =&gt; import('../components/App/Views/Dashboard')
          }, 
      ]
  }, {
      path: '/workspace/:id',
      name: 'Workspace',
      component: () =&gt; import('../views/Workspace.vue'),
      children: [
          {
              path: 'dashboard',
              name: 'Dashboard',
              component: () =&gt; import('../components/Workspace/Views/Dashboard')
          },
      ]
  },
  </code></pre>
  <p>Vue doesn't like this, and I also can't find a way to specify the dashboard I want using <code>name</code> 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.</p>
  <p>Is my approach wrong? I know I could maybe use the metadata tag in the route to create a <code>DisplayName: 'Dashboard'</code> and use that. Just want to check if there is a way.</p>