轉載自動手理解導航守衛（Vue）

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

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

路由改變的函數我們寫到項目的哪個位置，代碼寫哪個地方，這個就是官網上說的（全局守衛，路由獨享的守衛，組件內的守衛），下面一一介紹：

（一）全局守衛：

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

方法有：

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頁面，

常用方法：

beforeRouteEnter

?beforeRouteUpdate (2.2 新增)

?beforeRouteLeave

這些守衛與全局前置守衛的方法參數是一樣的,里面可以開始寫邏輯，注意點：beforeRouteEnter 守衛 不能 訪問 this，因為守衛在導航確認前被調用,因此即將登場的新組件還沒被創建。不過，你可以通過傳一個回調給 next來訪問組件實例。在導航被確認的時候執行回調，并且把組件實例作為回調方法的參數。

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

導航被觸發。

在失活的組件里調用離開守衛。

調用全局的 beforeEach 守衛。

在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。

在路由配置里調用 beforeEnter。

解析異步路由組件。

在被激活的組件里調用 beforeRouteEnter。

調用全局的 beforeResolve 守衛 (2.5+)。

導航被確認。

調用全局的 afterEach 鉤子。

觸發 DOM 更新。

用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

總結

以上是生活随笔為你收集整理的动手理解Vue导航守卫的全部內容，希望文章能夠幫你解決所遇到的問題。

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