当前栏目
Vue | 路由守卫面试常考
前言
金九银十,现在正是跳槽的季节,我给大家带来一篇面试常考 Vue 路由守卫 文章来助你拿到 offer,觉得不错的欢迎转发! ???
Vue Router 路由守卫
导图目录
- 路由守卫分类
- 全局路由守卫
- 单个路由守卫
- 组件路由守卫
- 路由守卫执行的完整过程
<hr/>
(福利推荐:阿里云、腾讯云、华为云服务器最新限时优惠活动,云服务器1核2G仅88元/年、2核4G仅698元/3年,点击这里立即抢购>>>)
路由守卫分类
- 全局路由
- 单个路由独享
- 组件内部路由
每个路由守卫的钩子函数都有 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
使用场景
- 发生在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的回调 ,创建好的组件实例会作为回调函数的参数传入。
结语
❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章
金
你还在原价购买阿里云、腾讯云、华为云、天翼云产品?那就亏大啦!现在申请成为四大品牌云厂商VIP用户,可以3折优惠价购买云服务器等云产品,并且可享四大云服务商产品终身VIP优惠价,还等什么?赶紧点击下面对应链接免费申请VIP客户吧:
相关文章
- 再见Session!这个跨域认证解决方案真的优雅!
- 聊聊删除链表中的重复节点,你会吗?
- 前端包管理器对比 npm、yarn 和 pnpm
- 2022强力之作:一款超精致的图片预览组件
- JS 中没有函数重载,又是如何实现函数重载的呢?
- 巧用 CSS 构建渐变彩色二维码
- 构建和运行前端 API 的七个关键注意事项
- 革命性创新,动画杀手锏 @Scroll-Timeline
- SSR 和前端编译,在这点上是一样的
- 快速网站的简单JavaScript性能优化技巧
- 你知不知道React lanes到底咋用啊?
- 2022 Web Components 趋势解读和展望
- 手把手教你用JavaScript打造一个网页搜索引擎
- 用于 TypeScript 枚举的实用辅助函数
- 理解 TypeScript 的 Never 类型
- 深入浅出 SetState 原理篇
- 用Babel和Nodemon搭建一个功能齐全的Nodejs开发环境
- 如何提高Web可访问性以改进应用程序?
- Electron桌面端Dooring搭建实战
- RxJS 之于异步,就像 JQuery 之于Dom