7个 Vue 路由守卫的执行顺序

大家好,我是大澈!一个喜欢结交朋友的老程序员👨🏻💻,关注我,科技未来或许我能帮到你!

我们都知道,Vue Router 提供了 3 类路由守卫,用于在路由跳转时进行拦截、验证或执行其他逻辑。

那它们的执行顺序你了解吗?

下面按从路由 A 切换到路由 B 的思路,对这 7 个路由守卫的执行顺序和作用,进行拆解!

一、beforeRouteLeave

当你离开当前页面时,如果页面组件中定义了 beforeRouteLeave 钩子,它会首先被调用。

作用:用来确认离开当前页面前是否需要执行一些操作,比如提醒用户保存未提交的数据。

二、beforeEach

离开组件的钩子执行完后,全局注册的 router.beforeEach 将被调用。

作用:在所有路由跳转中统一拦截,如验证用户是否登录或具备访问权限。

三、beforeEnter

接着,目标路由配置中专门设置的 beforeEnter 钩子会执行。

作用:只针对特定路由进行拦截与处理,比如判断某个页面是否只允许管理员访问。

四、beforeRouteUpdate

如果目标路由使用的是同一个组件(组件复用的情况),组件内的 beforeRouteUpdate 会被调用。

作用:当路由参数发生变化时,用来更新组件内部的数据,而不需要重新创建组件实例。

五、beforeRouteEnter

对于即将进入的新组件,beforeRouteEnter 钩子将执行,此时组件实例尚未创建,因此无法直接通过 this 访问。

作用:可以在进入页面前执行一些异步操作(如数据预加载),并通过回调函数在组件实例创建后执行后续逻辑。

六、beforeResolve

当上述所有路由和组件级别的守卫都执行完毕后,最后执行全局的 router.beforeResolve。

作用:做一些最后的检查或数据准备,确保所有前置逻辑都已完成再进行页面跳转。

七、afterEach

导航确认完成后,全局的 router.afterEach 钩子会被调用。

作用:执行一些不影响导航流程的后置操作,比如记录页面访问日志或触发页面动画。

好了,今天要分享的内容就是这么多,联系和更多内容在绿色App搜【程序员大澈】,最后感谢朋友们给个点赞、分享、推荐,拜拜~

相关推荐
FRing039 小时前
vue2干货总结2(v-bind、v-for、v-model、指令修饰符、v-bind操作class和style)
开发语言·前端·vue.js·vue2
幸运小猿9 小时前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
速易达网络12 小时前
ECharts 图表制作完全指南:从零到可视化实战
前端·javascript·echarts
徐小夕12 小时前
深度剖析 30k star 的编码 Agent DeepSeek-Reasonix:长会话 Token 成本直降 80%
前端·vue.js·github
paopaokaka_luck12 小时前
灾害应急物资管理系统(AI应急助手、Echarts可视化数据看板、捐赠入库联动、 物资全流程管理、库存变动追溯、灾情资讯与互动反馈、物资发放公示)
java·前端·javascript·spring boot·mysql·tomcat·echarts
kyriewen12 小时前
我验了 7 种 sticky 失效说法:3 种根本不成立
前端·javascript·程序员
我命由我1234514 小时前
Python 实用操作 - 文件操作(打开与关闭文件、读取文件、文件写入)
java·开发语言·前端·javascript·数据库·python·java-ee
Momo__14 小时前
你写的 import 重试,从来没生效过
前端·javascript·typescript
ruanno_top14 小时前
1 万行表格只渲染 18 行:虚拟滚动让我放弃了三个功能
vue.js
仨孩子的爹15 小时前
套打总偏两毫米:预印刷单据的校准方法和三个误区
vue.js