2019獨角獸企業重金招聘Python工程師標準>>>

????在路由的切換過程中，Ember路由器會通過回調（beforeModel、model、afterModel、redirect）解析一個transition對象到切換的下一路由中。任何一個回調都可以通過傳遞過來的transition參數獲取transition對象，然后使用這個對象調用transition.abort()方法立即終止路由的切換，如果你的程序保存了這個對象（transition對象）之后你還可以在需要的地方取出來并調用transition.retry()方法激活路由切換這個動作，最終實現路由的切換。

??????

1，通過調用willTransition方法阻止路由切換

?????? 當用戶通過{{link-to}}助手、transition方法或者直接執行URL來切換路由，當前路由會自動執行willTransition方法。每個活動的路由都可以決定是否執行切換路由。

?????? 想象一下，在當前路由所渲染的頁面是一個比較復雜的表單，并且用戶已經填寫了很多信息，但是用戶很可能無意中點擊了返回或者關閉頁面，這就導致了用戶填寫的信息直接丟失了，這樣的用戶體驗并不好。此時我們可以通過使用willTransition方法阻止用戶的行為并提示用戶是否確認離開本頁面。

?????? 為了驗證這個特性我們需要創建好測試所需的文件。

?????? ember g controller form

?????? ember g route form

?

?????? 首先在controller增加測試數據。

//??app/controllers/form.jsimport?Ember?from?'ember';export?default?Ember.Controller.extend({firstName:?'chen',lastName:?'ubuntuvim' });

再創建一個模擬用戶填寫信息的模板。

<form><div><label?for="exampleInputEmail1">FirstName</label>{{input?type="text"?id="exampleInputEmail1"?placeholder="FirstName"?value=firstName}}</div><div><label?for="exampleInputPassword1">LashName</label>{{input?type="text"?id="exampleInputPassword1"?placeholder="LashName"?value=lastName}}</div><button?type="submit"?class="btn?btn-primary">Submit</button> </form><br><br> {{#link-to?'about'}}<b>轉到about</b>{{/link-to}}

關鍵部分來了，我們在路由里添加willTransition方法。

//??app/routes/form.jsimport?Ember?from?'ember';export?default?Ember.Route.extend({actions:?{willTransition:?function(transition)?{//??如果是使用this.get('key')獲取不了頁面輸入值，因為不是通過action提交表單的var?v?=?this.controller.get('firstName');//??任意獲取一個作為判斷表單輸入值if?(v?&&?!confirm("你確定要離開這個頁面嗎？?"))?{transition.abort();}?else?{return?true;}}} });

? ? ? ?運行：http://localhost:4200/form，先點擊“submit”提交表單，可以看到表單順利提交沒有任何問題，然后再點擊“轉到about”，你可以看到會彈出如下提示框。

接著，點擊“取消”頁面沒有跳轉，如果是點擊“確定”頁面會跳轉到about頁面。

再接著，把FirstName這個輸入框的內容清空然后點擊“轉到about”頁面直接跳轉到了about頁面。

?????? 很多博客網站都是有這個功能的！！

??????

2，在beforeModel、model、afterModel回調中阻止路由切換

beforeModel(transition)?{if?(new?Date()?>?new?Date('January?1,?1980'))?{alert('Sorry,?you?need?a?time?machine?to?enter?this?route.');transition.abort();} }

? ? ? ?這段代碼演示的就是在beforeModel回調中使用abort方法阻止路由的切換。代碼比較簡單我就不做例子演示了！

3，路由會跳（retrying）

文件準備工作：

ember g controller auth

ember g route auth

ember g controller login

ember g route login

?

?????? 下面是演示用到的代碼。

//??app/controllers/login.jsimport?Ember?from?'ember';export?default?Ember.Controller.extend({userIsLogin:?false,actions:?{//?獲取跳轉過來之前路由中設置的transition對象var?transitionObj?=?this.get('transitionObj');if?(transitionObj)?{this.set("transitionObj",?null);this.set('userIsLogin',?true);??//?登錄成功的標記transitionObj.retry();??//??回到登錄前的頁面}?else?{//??轉回首頁this.transitionToRoute('index');}} }); //??app/routes/auth.jsimport?Ember?from?'ember';export?default?Ember.Route.extend({beforeModel(transition)?{//?在名為auth的controller設置了userIsLogin為false，默認是未登錄if?(!this.controllerFor("login").get('userIsLogin'))?{var?loginController?=?this.controllerFor("login");//?保存transition對象loginController.set("transitionObj",?transition);console.log('未授權轉到登錄頁面...');this.transitionTo("login");??//?跳轉到路由login}?else?{}} }); <!--??//app/templates/login.hbs?--><form?{{action?'login'?on='submit'}}><div?class="form-group"><label?for="exampleInputEmail1">FirstName</label>{{input?type="text"?class="form-control"?id="exampleInputEmail1"?placeholder="FirstName"?value=username}}</div><div?class="form-group"><label?for="exampleInputPassword1">LashName</label>{{input?type="text"?class="form-control"?id="exampleInputPassword1"?placeholder="LashName"?value=password}}</div><button?type="submit"?class="btn?btn-primary">Submit</button> </form> {{!?app/templates/auth.hbs}}授權頁面，登錄才能看，并且登錄成功后調回到這里。。。

這4段代碼模擬一個需要授權才能查看的頁面，還沒登錄的用戶會跳轉到登錄頁面，登錄成功之后會跳轉會到登錄前的查看的授權頁面。

這種方式在很多的網站都使用到，是一個非常常見的功能。

轉載于:https://my.oschina.net/ubuntuvim/blog/511599

總結

以上是生活随笔為你收集整理的Ember.js 入门指南——路由切换的终止和回跳的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。