1.全域性前置守衛

router.beforEach( (to, from , next) =>{

} )

to : 即將進入的路由

from : 從哪個路由離開

next() : 決定是否展示你要看到的路由頁面

使用時可以在meta原始資料中定義識別符號

2.路由獨享守衛

在路由配置上定義beforeEnter

beforeEnter : ( to , from , next ) => {}

用法跟全域性一樣， 只是，將其寫進其中一個路由物件中，只在這個路由下起作用。

beforeEnter 守衛只在進入路由的是時候才會觸發，不會在params，query 或 hash改變時觸發

3.全域性解析守衛

router.beforeResolve

和before.beforeEach 類似 因為他在每次導航時都會被觸發

但是確保在導航被確認之前，同時在所有元件內守衛和非同步路由元件被解析之後，解析守衛就被正確呼叫。

router.beforeResolve是獲取資料或執行任何其他操作（如果使用者無法進入頁面時你希望避免執行的操作）的理想位置。

4.全域性後置鉤子

router.afterEach

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

不同於前置守衛，後置鉤子並沒有 next 函式，也不會改變導航本身

它們對於分析、更改頁面標題、宣告頁面等輔助功能以及許多其他事情都很有用。

5.元件內的守衛你可以為路由元件新增以下配置

* beforeRouterEnter

* beforeRouterUpdate

* beforeRouterLeave

beforeReouterEnter( to , from) {}

在渲染該元件的對應路由被驗證前呼叫，不能獲取該元件例項 this （因為當守衛執行時，元件例項還沒被建立）

解決這時候不能獲取例項this

通過傳一個回撥給next來訪問元件例項

beforeRouterEnter((to , from next)=>{

next( vm=>{

//通過vm 訪問元件例項

})

})

beforeReouterUpdate( to , from) {}

在當前路由改變時，但是該元件被複用時呼叫

舉例來說，對於一個帶有動態引數的路徑 `/users/id`, 在 `/users/1` 和 `users/2` 之間跳轉的時候。由於會渲染同樣的 `UserDetails` 元件，因此元件例項會被複用，

這個時候beforeRouterUpdate 就在這個情況下呼叫。

因為在這種情況發生的時候，元件已經掛載好了，導航守衛可以訪問元件例項 this

他也可以通過上述 beforeRouterEnter 中next（） 訪問例項，但是完全沒必要　　

beforeReouterLeave( to , from) {}


在導航離開渲染該元件的對應路由時呼叫

與beforeRouterUpdate 一樣，也可以訪問元件例項 this

這個離開守衛通常用來預防使用者在還未儲存修改前突然離開。該導航可以通過返回false來取消

完整的導航解析流程

1、導航被觸發。

2、在失活的元件裡呼叫離開守衛。

3、呼叫全域性的beforeEach守衛。

4、在重用的元件裡呼叫beforeRouteUpdate 守衛 (2.2+)。

5、在路由配置裡呼叫beforeEnter。

6、解析非同步路由元件。

7、在被啟用的元件裡呼叫beforeRouteEnter。

8、呼叫全域性的beforeResole守衛 (2.5+)。

9、導航被確認。

10、呼叫全域性的afterEach鉤子。

11、觸發DOM更新。

12、用建立好的例項呼叫beforeRouteEnter守衛中傳給next的回撥函式。