Outlets #

The router outlet acts as a placeholder that marks the spot where the router should display the components for that outlet.

<div id="router-outlet"></div>

Given the routes above, when the browser URL for this application becomes /one, the router matches that URL to the route path /one and displays the <page-one> component as a sibling to the <div id="router-outlet">.

Root outlet #

A root outlet is mandatory when creating a router instance using the createRouter function.

Child outlets #

Views can contain child outlets allowing components to be composed in the view dynamically based on route.

<div id="outlet-sidebar"></div>

Routes can contain outlets that map outlets to components:

const routes = [
{
path: '/hello/:username',
action (context) {
// this component contains a <div id="outlet-sidebar"></div> outlet
return `<hello-page username="${context.params.username}"></hello-page>`
},
outlets: {
'#outlet-sidebar': (context) => `<sidebar-contents username="${context.params.username}"></sidebar-contents>`
}
}
]

The outlets object keys are CSS selectors that match an element in your view.
Each value must be a function that returns a string for a component or a Promise that resolves a string for a component.

Multiple outlets of the same name can exist and will be rendered with the same template. This is useful for displaying the same component in different locations - such as a mobile and desktop view.

const routes = [
{
path: '/hello/:username',
action (context) {
// this component contains a <div class="outlet-sidebar"></div> outlet
return `<hello-page username="${context.params.username}"></hello-page>`
},
outlets: {
'.outlet-sidebar': (context) => `<sidebar-contents username="${context.params.username}"></sidebar-contents>`
}
}
]

Sticky child outlets #

By default, URL changes clear outlets ready for new routes to render content. Setting a child outlet to sticky prevents this behaviour which means the contents only get replaced if a route defines an outlet that replaces the content.

To make an outlet sticky, simply add the sticky attribute to the outlet element.

<div id="outlet-sidebar" sticky></div>

resolveRoute #

The resolveRoute option can return an object containing template and outlets properties:

{
resolveRoute (context, params) {
return {
template: context.route.action(context, params), // call an existing route action for a template
outlets: {
'#bar': () => 'bar-contents'
}
}
}
}