Leaving a Route

Here, you’ll learn about transition events in Ember.js.

We'll cover the following

We saw how different route hooks can be leveraged to modify the flow of transition and redirect midway to another route. Another category of tasks is enabled by subscribing to router service events.

routeWillChange

There are two such events: routeDidChange and routeWillChange. We’ll use routeWillChange to warn the user about losing unsaved changes.

If the user starts typing the name of a new band and then clicks another link, the app transitions away from the page. The next time the user returns to it, the input has been cleared. It would improve the user experience if we warned them about losing their changes.

Before a transition is made, a routeWillChange event is triggered on the router service. It receives the transition object that includes both the source and destination routes, among other useful pieces of data. We’ll set up a listener upon the creation of the controller.

Get hands-on with 1200+ tech skills courses.