Class Route

This event is triggered when the router enters the route. It is not executed when the model for the route changes.

import { on } from '@ember/object/evented';
import Route from '@ember/routing/route';

export default Route.extend({
  collectAnalytics: on('activate', function(){
    collectAnalytics();
  })
});

This event is triggered when the router completely exits this route. It is not executed when the model for the route changes.

import { on } from '@ember/object/evented';
import Route from '@ember/routing/route';

export default Route.extend({
  trackPageLeaveAnalytics: on('deactivate', function(){
    trackPageLeaveAnalytics();
  })
});

The didTransition action is fired after a transition has successfully been completed. This occurs after the normal model hooks (beforeModel, model, afterModel, setupController) have resolved. The didTransition action has no arguments, however, it can be useful for tracking page views or resetting state on the controller.

import Route from '@ember/routing/route';
import { action } from '@ember/object';

export default class LoginRoute extends Route {
  @action
  didTransition() {
    // your code there
    return true; // Bubble the didTransition event
  }
}

When attempting to transition into a route, any of the hooks may return a promise that rejects, at which point an error action will be fired on the partially-entered routes, allowing for per-route error handling logic, or shared error handling logic defined on a parent route.

Here is an example of an error handler that will be invoked for rejected promises from the various hooks on the route, as well as any unhandled errors from child routes:

import { reject } from 'rsvp';
import Route from '@ember/routing/route';
import { action } from '@ember/object';
import { service } from '@ember/service';

export default class AdminRoute extends Route {
  @service router;

  beforeModel() {
    return reject('bad things!');
  }

  @action
  error(error, transition) {
    // Assuming we got here due to the error in `beforeModel`,
    // we can expect that error === "bad things!",
    // but a promise model rejecting would also
    // call this hook, as would any errors encountered
    // in `afterModel`.

    // The `error` hook is also provided the failed
    // `transition`, which can be stored and later
    // `.retry()`d if desired.

    this.router.transitionTo('login');
  }
}

error actions that bubble up all the way to ApplicationRoute will fire a default error handler that logs the error. You can specify your own global default error handler by overriding the error handler on ApplicationRoute:

import Route from '@ember/routing/route';
import { action } from '@ember/object';

export default class ApplicationRoute extends Route {
  @action
  error(error, transition) {
    this.controllerFor('banner').displayError(error.message);
  }
}

The loading action is fired on the route when a route's model hook returns a promise that is not already resolved. The current Transition object is the first parameter and the route that triggered the loading event is the second parameter.

import Route from '@ember/routing/route';
import { action } from '@ember/object';

export default class ApplicationRoute extends Route {
  @action
  loading(transition, route) {
    let controller = this.controllerFor('foo');

    // The controller may not be instantiated when initially loading
    if (controller) {
      controller.currentlyLoading = true;

      transition.finally(function() {
        controller.currentlyLoading = false;
      });
    }
  }
}

The willTransition action 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/route';
import { action } from '@ember/object';

export default class ContactFormRoute extends Route {
  @action
  willTransition(transition) {
    if (this.controller.get('userHasEnteredData')) {
      this.controller.displayNavigationConfirm();
      transition.abort();
    }
  }
}

You can also redirect elsewhere by calling this.router.transitionTo('elsewhere') from within willTransition. Note that willTransition will not be fired for the redirecting transitionTo, since willTransition doesn't fire when there is already a transition underway. If you want subsequent willTransition actions to fire for the redirecting transition, you must first explicitly call transition.abort().

To allow the willTransition event to continue bubbling to the parent route, use return true;. When the willTransition method has a return value of true then the parent route's willTransition method will be fired, enabling "bubbling" behavior for the event.