關注公衆號， 設置爲 '星標' ，更多精彩內容，第一時間獲取前端
導讀大綱
路由守衛分類 全局路由守衛 單個路由守衛 組件路由守衛 路由守衛執行的完整過程
路由守衛分類
全局路由 單個路由獨享 組件內部路由 每一個路由守衛的鉤子函數都有 3 個參數：web
to: 進入的目標路由微信
from: 離開的路由session
next: 控制路由 在跳轉時進行的操做，必定要執行。app它有 4 個行爲：編輯器
next(): 鉤子都執行完了，進入到下一個路由當中。函數
next(false): 中斷路由進入下一個路由。學習
next('/'): 根據你路由跳轉判斷條件來進入對應的路由，/爲路由的path。ui
next(new Error): 中斷路由跳轉，錯誤會被傳遞給router.onError()註冊過的回調。this
全局路由守衛
beforeEach（to，from， next）beforeResolve（to，from， next）afterEach（to，from）全局路由直接掛載到
router實例上。
//全局驗證路由
const router = createRouter({
history: createWebHashHistory(),
routes
});
// 白名單， 不須要驗證的路由
const whiteList = ['/','/register']
router.beforeEach((to,from,next)=>{
if(whiteList.indexOf(to.path) === 0) {
// 放行，進入下一個路由
next()
} else if(!(sessionStorage.getItem('token'))){
next('/');
} else {
next()
}
})
beforeEach
使用場景
「路由跳轉前觸發」
做用
「經常使用於登陸驗證」
beforeResolve
使用場景
「在 beforeEach 和 組件內beforeRouteEnter 以後，afterEach以前調用。」
afterEach
使用場景
「發生在beforeEach和beforeResolve以後，beforeRouteEnter以前。」 「路由在觸發後執行」
單個路由獨享
它只有一個 鉤子函數，
beforeEnter（to,from,next）
beforeEnter
使用場景
「在beforeEach以後執行，和它功能同樣」 ，不怎麼經常使用
{
path:'/superior',
component: Superior,
meta:{
icon:'el-icon-s-check',
title:'上級文件'
},
beforeEnter:(to,form,next) =>{
}
}
組件路由守衛
特色：
組件內執行的鉤子函數
鉤子函數：
beforeRouteEnter(to,from,next)beforeRouteUpdate(to,from,next)beforeRouteLeave(to,from,next)
beforeRouteEnter
使用場景：
路由進入以前調用。 不能獲取組件 this實例 ，由於路由在進入組件以前，組件實例尚未被建立。執行順序
beforeEach和獨享守衛beforeEnter以後，全局beforeResolve和全局afterEach以前調用.
beforeRouteUpdate
使用場景：
在當前路由改變時，而且該組件被複用時調用，能夠經過this訪問實例。 當前路由query變動時，該守衛會被調用。
beforeRouteLeave
使用場景：
導航離開該組件的對應路由時調用，能夠訪問組件實例this
路由守衛執行的完整過程
導航被觸發 執行 組件內部路由守衛： beforeRouteLeave執行 全局路由守衛 beforeEach在重用組件內部路由守衛鉤子 beforeRouteUpdate執行 路由中的鉤子 beforeEnter在被激活的組件裏調用 beforeRouteEnter 執行 全局的 beforeResolve 守衛 。 執行 全局的 afterEach 鉤子 beforeCreate created beforeMount mounted 執行 beforeRouteEnter的next的回調 ，建立好的組件實例會做爲回調函數的參數傳入。
原創不易，素質三連
本文分享自微信公衆號 - 前端自學社區（gh_ce69e7dba7b5）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。