Routes #

Each route is a plain JavaScript object having path and either component or action properties.

A route component is a tag string for a component. For example; my-page-component.

{ path: '/one', component: 'page-one' }

A route action must be a function that returns a string for a component or a Promise that resolves a string for a component.
The string can contain props that are passed to the component. For example:

// render the page component with tag <page-one>
{ path: '/one', action: () => 'page-one' }
{ path: '/one', action: () => '<page-one></page-one>' } // same as above

// use the route params to render the component with props
{ path: '/one', action: (context, params) => `<page-one title="${params.title}" user="${context.user}"></page-one>` }

The action function receives context and params arguments when the route matches, and the action function invoked:

const routes = [
{ path: '/one', action: (context, params) => `<page-one title=${params.title} user=${context.user}></page-one>` }
]
  • context is an object with any data you want to pass to an action (see Options below)
  • params is a key/value object containing URL and query string parameters matched for the route

You can define an action using different ES6 flavours:

{
path: '/',
action: () => 'home-page' // inline fat-arrow function
}
{
path: '/one',
action () { // shortcut function declaration
return 'page-one'
}
}

Adding routes dynamically #

Dynamically add more routes to the router using the addRoutes method.
The argument must be an Array using the same route format.

// create list of routes
const routes = [
{ path: '/one', component: 'page-one' },
{ path: '/two', component: 'page-two' }
]

const router = createRouter(routes, '#router-outlet')

// some time later
router.addRoutes([
{ path: '/three', component: 'page-three' },
{ path: '/four', action: () => `<page-four show-menu="true"></page-four>` }
])

Nested routes #

Each route may have an optional children: [ ... ] property containing the list of child routes:

const routes = [
{
path: '/admin',
children: [
{
path: '', // www.example.com/admin
component: 'admin-page'
},
{
path: '/users',
children: [
{
path: '', // www.example.com/admin/users
component: 'user-list-page'
},
{
path: '/:username', // www.example.com/admin/users/john
action: (context, { username }) => `<user-profile-page username="${username}"></user-profile-page>`
}
]
}
]
}
]