Router Preventing Transitions Via willTransition

It fires the willTransition action on currently active routes when you re-attempt the transition by using the {{link-to}} helper or the transitionTo method.

Syntax

Ember.Route.extend ({
   actions: {
      willTransition(transition) {
         //handle the transition
      }
   }
});

Example

The example given below depicts preventing transitions via the willTransition action on active route. Create a route called willtransition and open the router.js file with the following code to define URL mappings −

import Ember from 'ember';                   
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config 

//The const declares read only variable
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('willtransition');
});

//It specifies Router variable available to other parts of the app
export default Router;

Create the application.hbs file and add the following code −

//link-to is a handlebar helper used for creating links
{{link-to 'Click For Transition' 'willtransition'}}
{{outlet}} //It is a general helper, where content from other pages 
   will appear inside this section

Open the file willtransition.js file created under app/routes/ with the following code −

import Ember from 'ember';

export default Ember.Route.extend ({
   actions: {
      willTransition(transition) {
         
         //decalring the self variable
         var self = this;
         
         //checking whether self variable is false or not
         if (!this.get('allowTransition')) {
            document.write('<b><font color = "red">');
            
            //display the message
            document.write("transition abort");
            document.write('</font><br>');
            transition.abort();  //calling abort function

            Ember.run.later(function () {
               //setting the self variable to true
               self.set('allowTransition', true);
               document.write('<b><font color = "blue">');
               
               //display the message
               document.write("transition retry");
               document.write('</font>');
               transition.retry();  //calling retry function
            }, 500);
         }
      }
   }
});

Open the willtransition.hbs file created under app/templates/ with the following code −

<h2>Hello...Welcome to Adglob!!!</h2>
{{outlet}}

Output

Run the ember server and you will receive the following output −

When you click on the link, it will display the data. But if you click on the back link, the willTransition action calls the transition.abort() and then transition.retry() method.

Previous Page:-Click Here