路由跳轉前做一些驗證，比如登錄驗證，是網站中的普遍需求。

對此，vue-route 提供的 beforeRouteUpdate 可以方便地實現導航守衛（navigation-guards）。

導航守衛（navigation-guards）這個名字，聽起來怪怪的，但既然官方文檔是這樣翻譯的，就姑且這麽叫吧。

1.全局守衛

你可以使用 router.beforeEach 註冊一個全局前置守衛：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

當一個導航觸發時，全局前置守衛按照創建順序調用。守衛是異步解析執行，此時導航在所有守衛 resolve 完之前一直處於 等待中。

beforeEach()方法中有一個回調函數，該函數中有三個參數。

• 參數to:表示即將要進入的目標 （路由對象）

• 參數from: 表示從哪個路由離開

• 參數next:表示你要展示給我們看到的頁面效果，一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

下面寫一個例子：

要點一： 我們接著前面的例子繼續講。下面代碼，我們在全局守衛中，先 alert(“還沒有登錄，請先登錄”) ，此時刷新頁面會彈出一個alert窗口，我們點擊確定後，會發現無論點擊哪個路由模塊，都沒有頁面顯示。那是因為此時沒有添加一個 next() ,只要加上去就Ok了。

要點二： to.path表示當前你要跳轉的路徑，如果跳轉的是登錄和註冊，我們就0k,next(); 否則我們就把它引導到登錄裏面來 next(‘/login‘)；

這樣就造成了用戶沒有登錄狀態下，只能點擊登錄和註冊有效。這就是一個全局守衛。

main.js部分代碼

 1 const router = new VueRouter({
 2     routes,
 3     mode:‘history‘
 4 })
 5 
 6 
 7 //全局守衛
 8 router.beforeEach((to,from,next)=>{
 9     // alert("還沒有登錄，請先登陸");
 
10     // next();
11     // console.log(to);
12 
13     //判斷store.gettes.isLogin === false
14     if(to.path == ‘/login‘ || to.path == ‘/register‘){
15         next();
16     }else{
17         alert("還沒有登錄，請先登陸");
18         next(‘/login‘);
19     }
20 })
21 
22 new Vue({
23   el: ‘#app‘,
24   router,
25   render: h => h(App)
26 })

2.後置鉤子

afterEach() 表示進入組件之後所調用的方法，，beforeEach（） 表示進入組件之前所調用的方法。

router.afterEach((to,from) =>{

}

router調用afterEach()方法，該方法中傳遞兩個參數，to 和 from 並給個箭頭函數。

3.路由獨享守衛

可以在路由配置上直接定義 beforeEnter 守衛：比如：我們想進入Foo這頁面裏面的話，直接在其路由後面加上beforeEnteer()方法。

同理也是需要next() 來展示頁面，，如果沒有，則顯示不了頁面內容。

4.組件內的守衛

最後，你可以在路由組件內直接定義以下路由導航守衛：

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave

beforeRouteEnter 守衛 不能 訪問 this，因為守衛在導航確認前被調用,因此即將登場的新組件還沒被創建。

不過，你可以通過傳一個回調給 next來訪問組件實例。在導航被確認的時候執行回調，並且把組件實例作為回調方法的參數。

註意 beforeRouteEnter 是支持給 next 傳遞回調的唯一守衛。對於 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經可用了，所以不支持傳遞回調，因為沒有必要了。

這個離開守衛通常用來禁止用戶在還未保存修改前突然離開。該導航可以通過 next(false) 來取消。

完整的導航解析流程

1. 導航被觸發。
2. 在失活的組件裏調用離開守衛。
3. 調用全局的 beforeEach 守衛。
4. 在重用的組件裏調用 beforeRouteUpdate 守衛 (2.2+)。
5. 在路由配置裏調用 beforeEnter。
6. 解析異步路由組件。
7. 在被激活的組件裏調用 beforeRouteEnter。
8. 調用全局的 beforeResolve 守衛 (2.5+)。
9. 導航被確認。
10. 調用全局的 afterEach 鉤子。
11. 觸發 DOM 更新。
12. 用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

vue-路由精講-導航守衛