Vue-router: Be explicit about how children of a route work when there are multiple named routes given as the 'components' of the route

[jazoom]

What problem does this feature solve?

Confusion about how vue-router handles this scenario

What does the proposed API look like?

Imagine a route that looks like this:

     {
        path: '/', components: { header: Header, content: Content},
        children: [
          { path: '/signup', component: Signup },
          { path: '/login', component: Login }
        ]
     }

The root template contains this:

<router-view name='header'></router-view> 
<router-view name='content'></router-view> 

Header has <router-view></router-view> within its template, Content does not.

This results in the children of the / route being added within Header.

But what if the second component (Content) is the one with <router-view></router-view> within it?

What if they both have <router-view></router-view> in their templates?

This is an ambiguous situation that appears to presently work how I want it to, but I feel uncomfortable that this behaviour is not documented anywhere and there is no way to be explicit about which named component will get the children. It feels like this could easily break at any time.

[posva]

From the docs

Sometimes you need to display multiple views at the same time instead of nesting them

Looking at your example, the Header should be always there. You don't need nesting in that scenario 🙂 You should use Content, Login and Signup and 3 different route entries

[jazoom]

I think you basically just told me how to design my app and didn't actually address the issue. In fact, they cannot be 3 separate routes. Signup and Login are shown as modals over the header and content.

You closed this issue, so I'm assuming you have a solution for it?

By the way, this isn't even the names of the components in my app. I did this for illustrative purposes. It doesn't make sense to assume how the design should be. I was just illustrating a problem for you.

[posva]

Yes, the solution is not using nested views with named views at the same time

[jazoom]

So the solution is just don't create an app that does this? I'm not going to change my app just because Vue Router's behaviour in this instance is ill-defined. Like I said, it's working great. This app has been working well for a couple of years now and the design does its job. It worked under React and it's working under Vue. It just has the vue-router ambiguity issues I described above.

If you don't want to address the issue that's cool. I know you guys are very busy. But I'm not going to be the only person to ever come up against this ambiguity. Maybe you should leave this issue on the backlog or label it as WONTFIX, since the issue still remains?

[jazoom]

Anyway, whatever you decide to do, keep up the great work. Vue is awesome and you are building a good community.

[LinusBorg]

@jazoom We are always happy to help, but we have a forum for support questions:

https://forum.vuejs.org

...which is explained in the issue template that you filled out.

You issued a feature request, but it seems more like a request for help, seeing how this feature solves "Confusion about how vue-router handles this scenario" and the proposed API is not a proposal but a problem description.

We try to be strict about using issues for bugs and new features excluseively while offering support in other places like the forum, gitter chat or SO to keep github issues a manageable, productive development tool.

If you are willing to re-post your question on the forum. we will be happy to work out how to solve this problem using the existing API, or come up with a proper proposal if your problem can't be solved by it.

[jazoom]

I don't have a problem to solve. I've tried to make it pretty clear that my app works just fine. I thought I'd be helpful and let you guys know about a behaviour of the library that is not documented at all, and there is no indication of why it might behave in such a way.

I really don't know what support you think I need here.

[LinusBorg]

I'm sorry If I misunderstood your intention with this issue. To me it really did sound like you have a problem you needed solving. Reading it again with the explanation you gave now, I can see how your intention was something different.

Sorry about that.

We probably really should look into this a bit more, wer should at least update the documentation about the router's behaviour when using nested views and named views together.

[hyde777]

Hi,

I'm currently working on a project and i'm currently in the early design. And i find that @jazoom have a point here. i find that it would had a lot of clarity and modularity on the whole. Dunno if it's possible though.

Keep the good work !

[hyde777]

Something like this for example (like each Named Route can become a subset of children)

export default new Router({ routes: [ { name: 'Home', path: '/', components: { MenuBar: MenuBar, default: SideBar, MainStuff: [ { path: '', component: Home }, { path: 'Kanban', component: Kanban } ] } } ]

[ssipos90]

+1, I'm having this issue right now (I'll redesign this bit of my app for now)..

[ssipos90]

or having a default router-view if userland changes name:

<router-view name="main" default></router-view>
<router-view name="aside"></router-view>

[posva]

There is now a section about nested named views in docs