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-direct';

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-direct';

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-direct';

export class ViewProduct implements IRouteableComponent {
    async canLoad(params) {
        return '/products';
    }
}