Router Recipes
While the docs do a great job explaining the intricacies of the router, sometimes you just need a code snippet and 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 {
}
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'
}
}
];
}
In applications with multiple viewports, some routes might be loaded into specific 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 if the user is redirected away.import { IRouteableComponent } from '@aurelia/router';
export class ViewProduct implements IRouteableComponent {
async canLoad(params) {
return '/products';
}
}
Last modified 3mo ago