- 全局路由
- 单个路由独享
- 组件内部路由
每个路由守卫的钩子函数都有 3 个参数：
to : 进入的目标路由
from : 离开的路由
next : 控制路由 在跳转时进行的操作，一定要执行。
它有 4 个行为：
next() : 钩子都执行完了，进入到下一个路由当中。
next(false): 中断路由进入下一个路由。
next('/') : 根据你路由跳转判断条件来进入对应的路由， / 为路由的 path 。
next(new Error) : 中断路由跳转，错误会被传递给 router.onError() 注册过的回调。
- 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
使用场景
它只有一个 钩子函数， 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
使用场景：
执行顺序
beforeEach 和独享守卫 beforeEnter之后，全局 beforeResolve和全局afterEach之前调用.
beforeRouteUpdate
使用场景：
beforeRouteLeave
使用场景：
导航离开该组件的对应路由时调用，可以访问组件实例this
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/jszy-zmms/27639.html