Router Recipes
While the docs do a great job explaining the intricacies of the router, sometimes you just need a code snippet and a brief explanation to do something. You will find code snippets for basic things, from creating routes to working with router hooks.
A component that is loaded as part of a route definition. The
IRouteableComponent
import { IRouteableComponent } from '@aurelia/router';
export class MyComponent implements IRouteableComponent {
}
When working with the router, sometimes you want to access the currently active route. The router provides an array of
activeComponents
which can be one or more components currently active. In most instances, this array will only contain one component. However, if you are working with multiple viewports, this array will contain all components from those viewports.import { IRouter, IRoute } from '@aurelia/router';
export class MyComponent {
constructor(@IRouter private readonly router: IRouter) {}
attached() {
const route = this.router.activeComponents[0]?.route?.match as IRoute;
if (route) {
console.log(route.id); // Prints current route ID if a route was found
}
}
}
By leveraging the
route.match
property, we can get the currently active route. This is where you can access its data, path, name and other route configuration properties.To get all registered routes, you can use the
getRoutes
method from the rootScope
property of the router.import { IRouter, IRoute } from '@aurelia/router';
export class MyComponent {
constructor(@IRouter private readonly router: IRouter) {}
attached() {
const routes: IRoute[] = this.router?.rootScope?.getRoutes() ?? [];
console.log(routes) // one or more registered routes
}
}
As outlined in the Creating Routes section, routes can be specified using the
routes
decorator or the static routes
property.export class MyApp {
static routes = [
{
path: '/products',
component: () => import('./products-page'),
title: 'Products'
}
];
}
A parameter is denoted by the prefixed colon
:
followed by the parameter's name. In this example, our parameter is called productId
, which is required for the route to load.export class MyApp {
static routes = [
{
path: '/products/view/:productId',
component: () => import('./view-product'),
title: 'Products'
}
];
}
You can have more than one parameter (as many as you like):
export class MyApp {
static routes = [
{
path: '/products/view/:productId/:section',
component: () => import('./view-product'),
title: 'Products'
}
];
}
Routes support a custom
data
property allowing you to decorate your routes. Some use cases might include marking a route as requiring a user to be authenticated or an icon.export class MyApp {
static routes = [
{
path: '/products/view/:productId',
component: () => import('./view-product'),
title: 'Products',
data: {
icon: 'fa-light fa-alicorn'
}
}
];
}
Some routes might be loaded into specific viewports in applications with multiple viewports. You can use the
viewport
property on routes to specify which route.export class MyApp {
static routes = [
{
path: '/products/view/:productId',
component: () => import('./view-product'),
title: 'Products',
viewport: 'sidebar'
}
];
}
Inside components displayed by routes, the best place is to load data inside
canLoad
or load
hooks. If your view depends on the data being loaded (like a product detail page), use canLoad
otherwise, use load
. The first argument is any parameters passed through the route.import { IRouteableComponent } from '@aurelia/router';
export class ViewProduct implements IRouteableComponent {
async canLoad(params) {
this.product = this.api.loadProduct(params.productId);
}
}
Using the
canLoad
lifecycle hook, we can redirect users. In the following example, we redirect a user to a /products
route. You would have this wrapped in a check to determine if the component loads or the user is redirected away.import { IRouteableComponent } from '@aurelia/router';
export class ViewProduct implements IRouteableComponent {
async canLoad(params) {
return '/products';
}
}
Last modified 3mo ago