Document Named Views and Nested Routes

[oixan]

Version

3.0.1

Reproduction link

Full problem Example
https://jsfiddle.net/oaxs8ek8/

Steps to reproduce

I have created a Homepage with 2 Named Views called for example RouteA and RouteB.
Now RouteA and RouteB have 2 other nested routes like so RouteA1 and RouteA2 - RouteB1 and RouteB2.

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        RouteA : Bar,
        RouteB: Baz
      }
    }
  ]
})

this work very well for the first route but then i cant continue the routing chain for the 2 differente route since i cant only do this:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        RouteA : Bar,
        RouteB: Baz
      },
      children: [
        {
          path: '' // Load RouteA1 on RouteA
          component: UserProfile
        },
        {
          path: '', // Load RouteB1 on RouteB
          component: UserPosts
        }
      ]
    }
    }
  ]
})

There is no way to specify the different route.

A solution could be enable this for example:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        RouteA : {
                     path: ''
                     component: Bar,
                     children:{
                        ....
                     }
              },
        RouteB:  {
                     path: ''
                     component: Baz,
                     children:{
                        ....
                     }
      }
    }
  ]
})

What is expected?

The router should allow nested route with named view router

What is actually happening?

it's not routeing correctly

[posva]

Hey, really sorry for the delay!

If you're using named views with nested views, you'll have to name the nested views as well because otherwise, you end up with 2 router-view components at the same time.

In your fiddle you have to add a name to one of them:

const Bar = { template: '<div>bar <router-view name="b"></router-view> </div>' }

And use that in the route definition:

{ path: '/',
      // a single route can define multiple named components
      // which will be rendered into <router-view>s with corresponding names.
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      },
      children:[
      	{ path: '', components: { default: Foo2, b: Bar2 }},
      ]
    }

Here's a working version: https://jsfiddle.net/4xwnz3mg/

[posva]

This could be documented, so reopening this to track it

[oixan]

But with this methods how can i continue the chain with Bar 3 for example?

[posva]

What Bar3? You mean adding another nested route to the children routes?

[oixan]

I mean adding in bar 2 another nested route bar 3

[posva]

You add a children property to the path ''` in the children array. But nesting careful when nesting too many things, it complexifies the application structure a lot