Defining routes

There are a few ways to add routes to your router. You can specify your routes when creating a router instance and / or use chainable add and addNode methods to add routes.

With plain objects

You can define your routes using plain objects:

• name: the route name

• path: the route path, relative to its parent

Route objects optionally accept the following properties:

• canActivate: a method to control whether or not the route node can be activated (see Preventing navigation)

• forwardTo: if specified, the router will transition to the forwarded route instead. It is useful for defaulting to a child route

• defaultParams: an object of default params to extend when navigating and when matching a path

• encodeParams(stateParams): a function of state params returning path params. Used when building a path given a route name and params (typically on start and navigation).

• decodeParams(pathParams): a function of path params returning params. Used when matching a path to map path params to state params.

Note on encodeParams and decodeParams: one can't be used without another, and applying one after another should be equivalent to an identity function.

Flat route list

You can define your routes using a flat list, in which case route names must be specified in full.

const routes = [
    { name: 'users',      path: '/users'},
    { name: 'users.view', path: '/view'},
    { name: 'users.list', path: '/list'}
];

Tree of routes

You can define your routes using a tree (making use of children), in which case route names are relative to their parent.

const routes = [
    { name: 'users', path: '/users', children: [
        { name: 'view', path: '/view'},
        { name: 'list', path: '/list'}
    ]}
];

Adding routes

You can add all your routes at once using createRouter or router.add.

When creating your router

const router = createRouter(routes, options);

After creating your router

.add() accepts single or multiple nodes, flat or nested.

myRouter.add({ name: 'about', path: '/about' });
// Or
myRouter.add([
    {name: 'about',   path: '/about'},
    {name: 'contact', path: '/contact'},
]);

Configuring the root node path

At the top of your tree of routes, there is an unamed node called the root node. Its path is empty and can be configured using router.setRootPath(path). It can be used for example to list a number of allowed query parameters for all routes in strict query parameters mode (router.setRootPath('?param1&param2')).