Navigating

Learn how to navigate the router programmatically using the router load method and the HTML load attribute for creating in-page routes.

This section details how you can use the load method on the router instance or load attribute to navigate to other parts of your application.

Programmatically using the load method

To use the load method, you have first to inject the router into your component. This can be done easily by using the IRouter decorator on your component constructor method. The following code will add a property to your component, which we can reference.

import { resolve } from 'aurelia';
import { IRouter, IRouteableComponent } from '@aurelia/router';

export class MyComponent implements IRouteableComponent {
    private router: IRouter = resolve(IRouter);
}

Navigating without options

The load method can accept a simple string value allowing you to navigate to another component without needing to supply configuration options.

import { resolve } from 'aurelia';
import { IRouter, IRouteableComponent } from '@aurelia/router';

export class MyComponent implements IRouteableComponent {
    private router: IRouter = resolve(IRouter);

    async viewProducts() {
        await this.router.load('/products');
    }
}

You could also use the string value method to pass parameter values and do something like this where our route expects a product ID, and we pass 12:

import { resolve } from 'aurelia';
import { IRouter, IRouteableComponent } from '@aurelia/router';

export class MyComponent implements IRouteableComponent {
    private router: IRouter = resolve(IRouter);

    async viewProducts() {
        await this.router.load(`/products/12`);
    }
}

Specifying load options

The router instance load method allows you to specify different properties on a per-use basis. The most common one is the title property, which allows you to modify the title as you navigate your route.

A list of available load options can be found below:

• title — Sets the title of the component being loaded

• parameters — Specify an object to be serialized to a query string and then set to the query string of the new URL.

• fragment — Specify the hash fragment for the new URL.

These option values can be specified as follows and when needed:

import { resolve } from 'aurelia';
import { IRouter, IRouteableComponent } from '@aurelia/router';

export class MyComponent implements IRouteableComponent {
    private router: IRouter = resolve(IRouter);

    async viewProduct() {
        await this.router.load('products', {
            title: 'My product',
            parameters: {
                prop1: 'val',
                tracking: 'asdasdjaks232'
            },
            fragment: 'jfjdjf'
        });
    }
}

HTML load attribute

The router also allows you to decorate links and buttons in your application using a load attribute, which works the same way as the router instance load method.

If you have routes defined on a root level (inside of my-app.ts) you will need to add a forward slash in front of any routes you attempt to load. The following would work in the case of an application using configured routes.

<a load="/products/12">Product #12</a>

The load attribute can do more than accept a string value. You can also bind to the load attribute for more explicit routing. The following example is a bit redundant as specifying route:product would be the same as specifying load="product" , but if you're wanting more explicit routing, it conveys the intent better.

<a load="route:product;">My Route</a>

And where things start to get interesting is when you want to pass parameters to a route. We use the params configuration property to specify parameters.

<a load="route:profile; params.bind:{name: 'rob'}">View Profile</a>

In the above example, we provide the route (id) value (via route: profile). But, then also provide an object of parameters (via params.bind: { name: 'rob' }).

These parameter values correspond to any parameters configured in your route definition. In our case, our route looks like this:

{
    id: 'profile',
    path: 'profile/:name',
    component: () => import('./view-profile'),
    title: 'View Profile'
},

Redirecting

Depending on the scenario, you will want to redirect users in your application. Unlike using the load API on the router where we manually route (for example, after logging in) redirection allows us to redirect inside router hooks.

Please see the Routing Lifecycle section to learn how to implement redirection inside your components.