Ability to set parent named view from child route

[Mikilll94]

What problem does this feature solve?

I have the following router configuration:

{
    path: '/home',
    components: {
        default: HomePage,
        leftSidebar: DefaultLeftSidebar
    },
    children: [
        {
            path: 'emails',
            component: UserEmailsSubscriptions
        },
        {
            path: 'profile',
            components: {
                default: UserProfile,
                leftSidebar: UserProfileLeftSidebar, // not possible
            }
        }
    ]
}

As you can see, on route /home I use a named view for the left sidebar. I need to replace this sidebar with UserProfileLeftSidebar on /home/profile route. However, this not possible because leftSidebar named view is defined in the parent view.

I think that this a pretty common use case that you have a navigation bar or sidebar that needs to be replaced or modified on some router paths.

I would be very glad if someone could share a solution how to implement a dynamic sidebar or navigation bar using vue-router.

What does the proposed API look like?

The API could look like in the example above. However, it requires that every named view must have globally unique name.

[posva]

If you want to affect a specific level of router-view nesting, you must create the routes at that level, so create a route alongside the /home route:

 {
            path: '/home/profile',
            components: {
                default: UserProfile,
                leftSidebar: UserProfileLeftSidebar,
            }
        }

[Mikilll94]

@posva
Why did you close that? Unfortunately, your solution is far from perfect. In real apps it is common to have many levels of navigation nesting, like i.e. home page -> top tabs -> bottom tabs. And I need to be able to dynamically change the side bar when a user navigates to specific deeply nested route. How to achieve that?

Could you reopen this issue? Your solution to have a flat navigation without any nesting is not possible to implement in many real apps.

[joeSaad]

I am facing the same issue @Mikilll94 and I see its use case in an app I am working on now.
@posva is there any other way other than using flat routes? And if possible to reopen this and see if other people could have solutions or add some ideas into this.. many thanks