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.
Create a routeable component
A component that is loaded as part of a route definition. The IRouteableComponent
import { IRouteableComponent } from '@aurelia/router';
​
export class MyComponent implements IRouteableComponent {
​
}
Creating a route
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'
        }
    ];
}
Creating a route with parameters
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'
        }
    ];
}
Creating a route with custom configuration values
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'
            }
        }
    ];
}
Creating a route with a custom viewport
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'
        }
    ];
}
Loading data inside of a routeable component
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);
    }
}
Redirect away from a component
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