動手理解導航守衛（Vue）

米啟點發表於2018-08-06
Vue

最近不是很忙，把自己不會的技術點看了一遍文件，然後動手敲了一下程式碼，加深自己理解。通過實戰Demo，除錯，結果分析，理解了官網的知識點。記錄下來，第一是方便自己加深理解，第二是後續可以回顧，第三可以幫助像我這種小白的人一起學習。

導航就是我們說的路由，當路由發生變化的時候，我們想要做的事情，這就是導航守衛的重點。

路由改變的函式我們寫到專案的哪個位置，程式碼寫哪個地方，這個就是官網上說的（全域性守衛，路由獨享的守衛，元件內的守衛），下面一一介紹：

（一）全域性守衛：

用來監測所有的路由，程式碼寫在路由頁面(router.js)

動手理解導航守衛（Vue）

方法有：

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

複製程式碼

to,from,next三個引數都是必要的

to: 即將要進入的目標 路由物件

from:  當前導航正要離開的路由

next：一定要呼叫該方法來 resolve 這個鉤子，如果不寫next()或者next(false)，頁面路由不會跳轉，也就是頁面被阻止在當前頁面了

to,from是一個物件，就是routes[] 陣列裡面配置的某個具體的路由物件，

比如：to.path,  to,name,  to.meta 等等

from.path,  from.name, from.meta  【path,name,meta】這些欄位都是自己在路由裡面定義的欄位，這樣就可以開始寫邏輯了。

動手理解導航守衛（Vue）

（二）路由獨享守衛：

就是將路由鉤子函式寫在我們的某個具體路由物件裡面：

動手理解導航守衛（Vue）

這些守衛與全域性前置守衛的方法引數是一樣的,裡面可以開始寫邏輯。

（三）元件內的守衛：

我們寫的vue頁面，

常用方法：

beforeRouteEnter

 beforeRouteUpdate (2.2 新增)

 beforeRouteLeave

動手理解導航守衛（Vue）

這些守衛與全域性前置守衛的方法引數是一樣的,裡面可以開始寫邏輯，注意點：beforeRouteEnter 守衛 不能 訪問 this，因為守衛在導航確認前被呼叫,因此即將登場的新元件還沒被建立。不過，你可以通過傳一個回撥給 next來訪問元件例項。在導航被確認的時候執行回撥，並且把元件例項作為回撥方法的引數。

動手理解導航守衛（Vue）


官網整個路由守衛被觸發流程的步驟：

  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 的回撥函式。





相關文章