7个 Vue 路由守卫的执行顺序（vue的路由守卫实现原理）
ztj100 2025-03-25 19:39 11 浏览 0 评论
大家好，我是大澈！一个喜欢结交朋友的老程序员，关注我，科技未来或许我能帮到你！
我们都知道，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搜【程序员大澈】，最后感谢朋友们给个点赞、分享、推荐，拜拜~
相关推荐
- Whoosh，纯python编写轻量级搜索工具
-
引言在许多应用程序中，搜索功能是至关重要的。Whoosh是一个纯Python编写的轻量级搜索引擎库，可以帮助我们快速构建搜索功能。无论是在网站、博客还是本地应用程序中，Whoosh都能提供高效的全文搜...
- 如何用Python实现二分搜索算法（python二分法查找代码）
-
如何用Python实现二分搜索算法二分搜索（BinarySearch）是一种高效的查找算法，适用于在有序数组中快速定位目标值。其核心思想是通过不断缩小搜索范围，每次将问题规模减半，时间复杂度为(O...
- 路径扫描 -- dirsearch（路径查找器怎么使用）
-
外表干净是尊重别人，内心干净是尊重自己，干净，在今天这个时代，应该是一种极高的赞美和珍贵。。。----网易云热评一、软件介绍Dirsearch是一种命令行工具，可以强制获取web服务器中的目录和文件...
- 78行Python代码帮你复现微信撤回消息!
-
来源：悟空智能科技本文约700字，建议阅读5分钟。本文基于python的微信开源库itchat，教你如何收集私聊撤回的信息。...
- 从零开始学习 Python!2《进阶知识》 Python进阶之路
-
欢迎来到Python学习的进阶篇章！如果你说已经掌握了基础语法，那么这篇就是你开启高手之路的大门。我们将一起探讨面向对象编程...
- 白帽黑客如何通过dirsearch脚本工具扫描和收集网站敏感文件
-
一、背景介绍...
- Python之txt数据预定替换word预定义定位标记生成word报告(四)
-
续接Python之txt数据预定替换word预定义定位标记生成word报告（一）https://mp.toutiao.com/profile_v4/graphic/preview?pgc_id=748...
- Python——字符串和正则表达式中的反斜杠('\')问题详解
-
在本篇文章里小编给大家整理的是关于Python字符串和正则表达式中的反斜杠('\')问题以及相关知识点，有需要的朋友们可以学习下。在Python普通字符串中在Python中，我们用'\'来转义某些普通...
- Python re模块:正则表达式综合指南
-
Python...
- python之re模块（python re模块sub）
-
re模块一.re模块的介绍1.什么是正则表达式"定义:正则表达式是一种对字符和特殊字符操作的一种逻辑公式，从特定的字符中，用正则表达字符来过滤的逻辑。(也是一种文本模式；)2、正则表达式可以帮助我们...
- MySQL、PostgreSQL、SQL Server 数据库导入导出实操全解
-
在数字化时代，数据是关键资产，数据库的导入导出操作则是连接数据与应用场景的桥梁。以下是常见数据库导入导出的实用方法及代码，包含更多细节和特殊情况处理，助你应对各种实际场景。一、MySQL数据库...
- Zabbix监控系统系列之六:监控 mysql
-
zabbix监控mysql1、监控规划在创建监控项之前要尽量考虑清楚要监控什么，怎么监控，监控数据如何存储，监控数据如何展现，如何处理报警等。要进行监控的系统规划需要对Zabbix很了解，这里只是...
- mysql系列之一文详解Navicat工具的使用(二)
-
本章内容是系列内容的第二部分，主要介绍Navicat工具的使用。若查看第一部分请见：...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- Whoosh，纯python编写轻量级搜索工具
- 如何用Python实现二分搜索算法（python二分法查找代码）
- 路径扫描 -- dirsearch（路径查找器怎么使用）
- 78行Python代码帮你复现微信撤回消息!
- 从零开始学习 Python!2《进阶知识》 Python进阶之路
- 白帽黑客如何通过dirsearch脚本工具扫描和收集网站敏感文件
- Python之txt数据预定替换word预定义定位标记生成word报告(四)
- 假期苦短，我用Python!这有个自动回复拜年信息的小程序
- Python——字符串和正则表达式中的反斜杠('\')问题详解
- Python re模块:正则表达式综合指南
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)