Empty parent in nested routes

[rayfranco]

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.

[micate]

+1 for this feature.

Even more, is it possible to assign a parent component in child route declaration?

For example, a parent route have ten children routes, eight have same ui part(same footer or header), two are different(without footer or header).

In this case, we need break the same part from parent view, add to these eight route views, otherwise the two other route views would have same part too, which is not our purpose.

[fnlctrl]

@micate

Even more, is it possible to assign a parent component in child route declaration?

Yes.

For example, a parent route have ten children routes, eight have same ui part(same footer or header), two are different(without footer or header).

I guess you can try named views for this http://router.vuejs.org/en/essentials/named-views.html

[yyx990803]

I think this breaks the relationship between route config nesting and router-view nesting and can make things a bit harder to reason about.

You might be able to do something like:

prefixWith('/:lang', [
  {
    path: '',
    component: WelcomeComponent
  },
  {
    path: 'hello/:name',
    component: HelloComponent
  }
])

where prefixWith's implementation should be pretty straightforward.

[jeffjose]

@yyx990803 Where can I find the doc or an example on how to use prefixWith? I guess I dont know where the prefixWith goes in the code. Thank you!

[rjurado01]

+1

[posva]

It's simply a function that rewrites the array to prepends /:lang to all routes provided. It's not documented anywhere, you shall write it yourself 😄

[thearabbit]

+1 for documentation help?

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

[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.

[thearabbit]

@dschreij 👍

[rubens-shoji]

I'm using redirect to jump parent component

{
      path: '/anime',
      redirect: '/anime/home',
      name: 'Anime',
      component: Anime,
      meta: {
        humanName: 'Animes',
        showOnNav: true
      },
      children: [
        {
          path: 'home',
          name: 'AnimeHome',
          component: AnimeHome,
          meta: {
            humanName: 'List'
          },
        },
        {
          path: 'new',
          name: 'AnimeNew',
          component: AnimeNew,
          meta: {
            humanName: 'New'
          },
        },
        {
          path: 'edit/:id',
          name: 'AnimeEdit',
          component: AnimeEdit,
          meta: {
            humanName: 'Edit'
          },
        }
      ],
 },

@Rubensfernandes But you define parent component. Did you read the OP?