Empty parent in nested routes

It could be interesting to have a parent route definition without any component and having the matched children rendered in the root <router-view>. Here is an example:

var routes = [
  {
    path: '/:lang',
    children: [
      {
        path: '',
        component: WelcomeComponent
      },
      {
        path: 'hello/:name',
        component: HelloComponent
      }
    ]
  }
]

This won’t work. Instead, this is what I am doing:

var routes = [
  {
    path: '/:lang',
    // create a container component
    component: {
      render (c) { return c('router-view') }
    },
    children: [
      {
        path: '',
        component: WelcomeComponent
      },
      {
        path: 'hello/:name',
        component: HelloComponent
      }
    ]
  }
]

But the original problem was to scope my routes by their definitions only, not by components.

[dschreij]

My take on this:

const withPrefix = (prefix, routes) => 
    routes.map( (route) => {
        route.path = prefix + route.path;
        return route;
    });

export const routes = [
    { 
        path: '/',
        component: Home 
    },
    { 
        path: '/contacts',
        component: Contacts,
        props:{
            pageTitle: 'Contacts'
        }
    },
    ...withPrefix('/settings',[
        { 
            path: '/account',
            component: AccountSettings,
            props:{
                pageTitle: 'Account settings'
            },
        },
        { 
            path: '/application',
            component: AppSettings,
            props:{
                pageTitle: 'Application settings'
            },
        },
    ]),
]

Pretty straightforward, although I can understand the desire for a utility function for this.

[ghost]

kinda shitty that you can’t just omit the Component when you want the child to be rendered instead of the parent…