Vue-router: Named/multiple outlets support

Created on 2 Nov 2015 · 13Comments · Source: vuejs/vue-router

It would be very nice to have named outlet support.

It's mostly to have easy modals support and being able to write something like:

<body>
<div>
   <router-view name="modal"></router-view>
</div>
<router-view ></router-view>
</body>

router.map({
    '/somewhere/': {
        component: Somewhere,
        subRoutes: {
            'action/': {
                 component: Modal,
                 outlet: 'modal'
            }
        }
    }
});

Then, routing to /somewhere/action/ should bring the Somewhere component and display the modal over.

My case is for modal, but I think whenever you have an outer layout with multiple reusable slots, a single outlet is not sufficient.

If there is already a way of doing this, I'm interested in.

1.x feature request

Source

noirbizarre

👍7

Most helpful comment

This is available in vue-router 2.0.0-rc.* (which is only compatible with Vue 2.0).

Work on vue-router 0.7.* won't really go on until all the 2.0 related release work is done.

@djvonavi If you want to work on a PR, that would be welcome.

LinusBorg on 6 Sep 2016

🎉3 ❤1

All 13 comments

:+1: Would love something like this.

bradstewart on 17 Nov 2015

:+1:

decademoon on 11 Jan 2016

I think this can be achieved by using named routes, no? Like <modal v-if="$router.name === 'modal'"></modal>.

azamat-sharapov on 15 Jan 2016

To add on to what @azamat-sharapov stated, the named routes feature is documented here: http://vuejs.github.io/vue-router/en/named.html

Though since I believe this use case to be common then I think a cleaner API to handle it would be nice, instead of having $router.name === 'modal' all over.