Class RouterService

The routeDidChange event only fires once a transition has settled. This includes aborts and error substates. Like the routeWillChange event it receives a Transition as the sole argument.

A good example is sending some analytics when the route has transitioned:

import Route from '@ember/routing';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';

export default class extends Route {
  @service router;

  constructor() {
    super(...arguments);

    this.router.on('routeDidChange', (transition) => {
      ga.send('pageView', {
        current: transition.to.name,
        from: transition.from.name
      });
    })
  }
}

routeDidChange will be called after any Route's didTransition action has been fired. The updates of properties currentURL, currentRouteName and currentRoute are completed at the time routeDidChange is called.

The routeWillChange event is fired at the beginning of any attempted transition with a Transition object as the sole argument. This action can be used for aborting, redirecting, or decorating the transition from the currently active routes.

A good example is preventing navigation when a form is half-filled out:

import Route from '@ember/routing';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';

export default class extends Route {
  @service router;

  constructor() {
    super(...arguments);

    this.router.on('routeWillChange', (transition) => {
      if (!transition.to.find(route => route.name === this.routeName)) {
        alert("Please save or cancel your changes.");
        transition.abort();
      }
    })
  }
}

The routeWillChange event fires whenever a new route is chosen as the desired target of a transition. This includes transitionTo, replaceWith, all redirection for any reason including error handling, and abort. Aborting implies changing the desired target back to where you already were. Once a transition has completed, routeDidChange fires.