Router events

Learn about how to subscribe to and handle router events.

You can use the lifecycle hooks (instance and shared) to intercept different stages of the navigation when you are working with the routed components directly. However, if you want to tap into different navigation phases from a non-routed component, such as standalone service or a simple custom element, then you need to leverage router events. This section discusses that.

Emitted events

The router emits the following events.

• au:router:location-change: Emitted when the browser location is changed via the popstate and hashchange events.

• au:router:navigation-start: Emitted by router before executing a routing instruction; or in other words, before performing navigation.

• au:router:navigation-end: Emitted when the navigation is completed successfully.

• au:router:navigation-cancel: Emitted when the navigation is cancelled via a non-true return value from canLoad or canUnload lifecycle hooks.

• au:router:navigation-error: Emitted when the navigation is erred.

Subscribing to the events

The events can be subscribed to using the event aggregator. However, there is another type-safe alternative to that.

To this end, inject the IRouterEvents and use the IRouterEvents#subscribe.

import {
  IRouterEvents,
  LocationChangeEvent,
  NavigationStartEvent,
  NavigationEndEvent,
  NavigationCancelEvent,
  NavigationErrorEvent,
} from '@aurelia/router-lite';
import { IDisposable } from 'aurelia';

export class SomeService implements IDisposable {
  private readonly subscriptions: IDisposable[];
  public log: string[] = [];
  public constructor(@IRouterEvents events: IRouterEvents) {
    this.subscriptions = [
      events.subscribe('au:router:location-change',   (event: LocationChangeEvent)   => { /* handle event */ }),
      events.subscribe('au:router:navigation-start',  (event: NavigationStartEvent)  => { /* handle event */ }),
      events.subscribe('au:router:navigation-end',    (event: NavigationEndEvent)    => { /* handle event */ }),
      events.subscribe('au:router:navigation-cancel', (event: NavigationCancelEvent) => { /* handle event */ }),
      events.subscribe('au:router:navigation-error',  (event: NavigationErrorEvent)  => { /* handle event */ }),
    ];
  }
  public dispose(): void {
    const subscriptions = this.subscriptions;
    this.subscriptions.length = 0;
    const len = subscriptions.length;
    for (let i = 0; i < len; i++) {
      subscriptions[i].dispose();
    }
  }
}

Note that the event-data for every event has a different type. When you are using TypeScript, using IRouterEvents correctly types the event-data to the corresponding event type and naturally provides you with intellisense. This type information won't be available if you subscribe to the events using the event aggregator.

The following example demonstrates the usage of router events, where the root component displays a spinner at the start of navigation, and removes it when the navigation ends.

import { IRouterEvents } from '@aurelia/router-lite';

export class MyApp {
  private navigating: boolean = false;
  public constructor(@IRouterEvents events: IRouterEvents) {
    events.subscribe(
      'au:router:navigation-start',
      () => (this.navigating = true)
    );
    events.subscribe(
      'au:router:navigation-end',
      () => (this.navigating = false)
    );
  }
}

This is shown in action below.

router-lite - events - StackBlitzStackBlitz