路由器通过 willTransition 阻止转换

当您使用 {{link-to}> 帮助程序或 transitionTo 方法重新尝试转换时，它会在当前活动路由上触发 willTransition 操作。

语法

Ember.Route.extend ({
   actions: {
      willTransition(transition) {
         //处理转换
      }
   }
});

示例

下面给出的示例描述了通过活动路由上的 willTransition 操作阻止转换。创建一个名为 willtransition 的路由，并使用以下代码打开 router.js 文件来定义 URL 映射 −

import Ember from 'ember';
//以变量 Ember 的形式访问 Ember.js 库
import config from './config/environment';
//它提供以变量 config 的形式访问应用程序配置数据的功能

//const 声明只读变量
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

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

//它指定了可供应用程序其他部分使用的 Router 变量
export default Router;

创建 application.hbs 文件并添加以下代码 −

//link-to 是用于创建链接的手柄助手
{{link-to 'Click For Transition' 'willtransition'}}
{{outlet}} //它是一个通用助手，其他页面的内容将显示在此部分内

使用以下代码打开在 app/routes/ 下创建的文件 willtransition.js −

import Ember from 'ember';

export default Ember.Route.extend ({
   actions: {
      willTransition(transition) {
         
         //声明自身变量
         var self = this;
         
         //检查自身变量是否为假
         if (!this.get('allowTransition')) {
            document.write('<b><font color = "red">');
            
            //显示消息
            document.write("transition abort");
            document.write('</font><br>');
            transition.abort();  //调用中止函数

            Ember.run.later(function () {
               //将 self 变量设置为 true
               self.set('allowTransition', true);
               document.write('<b><font color = "blue">');
               
               //显示消息
               document.write("transition retry");
               document.write('</font>');
               transition.retry();  //调用重试函数
            }, 500);
         }
      }
   }
});

使用以下代码打开在 app/templates/ 下创建的 willtransition.hbs 文件 −

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

输出

运行ember服务器，您将收到以下输出−

当您点击链接时，它将显示数据。但是如果你点击返回链接，willTransition 动作会调用 transition.abort()，然后调用 transition.retry() 方法。< /p>

emberjs_router.html