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 namepath: 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 routedefaultParams: an object of default params to extend when navigating and when matching a pathencodeParams(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.
1
const routes = [
2
{ name: 'users', path: '/users'},
3
{ name: 'users.view', path: '/view'},
4
{ name: 'users.list', path: '/list'}
5
];
Copied!
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.1
const routes = [
2
{ name: 'users', path: '/users', children: [
3
{ name: 'view', path: '/view'},
4
{ name: 'list', path: '/list'}
5
]}
6
];
Copied!
Adding routes
You can add all your routes at once using
createRouter or router.add.When creating your router
1
const router = createRouter(routes, options);
Copied!
After creating your router
.add() accepts single or multiple nodes, flat or nested.1
myRouter.add({ name: 'about', path: '/about' });
2
// Or
3
myRouter.add([
4
{name: 'about', path: '/about'},
5
{name: 'contact', path: '/contact'},
6
]);
Copied!
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¶m2')).Last modified 3yr ago