关注公众号， 设置为 '星标' ，更多精彩内容，第一时间获取前端
导读大纲
路由守卫分类 全局路由守卫 单个路由守卫 组件路由守卫 路由守卫执行的完整过程
路由守卫分类
全局路由 单个路由独享 组件内部路由 每一个路由守卫的钩子函数都有 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源创计划”，欢迎正在阅读的你也加入，一块儿分享。