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.
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.
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'}];
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'}]}];
You can add all your routes at once using createRouter
or router.add
.
const router = createRouter(routes, options);
.add()
accepts single or multiple nodes, flat or nested.
myRouter.add({ name: 'about', path: '/about' });// OrmyRouter.add([{name: 'about', path: '/about'},{name: 'contact', path: '/contact'},]);
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¶m2')
).