7个 Vue 路由守卫的执行顺序（vue的路由守卫实现原理）
ztj100 2025-03-25 19:39 20 浏览 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搜【程序员大澈】，最后感谢朋友们给个点赞、分享、推荐，拜拜~
相关推荐
- 30天学会Python编程:16. Python常用标准库使用教程
-
16.1collections模块16.1.1高级数据结构16.1.2示例...
- 强烈推荐!Python 这个宝藏库 re 正则匹配
-
Python的re模块（RegularExpression正则表达式）提供各种正则表达式的匹配操作。...
- Python爬虫中正则表达式的用法，只讲如何应用，不讲原理
-
Python爬虫：正则的用法(非原理)。大家好，这节课给大家讲正则的实际用法，不讲原理，通俗易懂的讲如何用正则抓取内容。·导入re库，这里是需要从html这段字符串中提取出中间的那几个文字。实例一个对...
- Python数据分析实战-正则提取文本的URL网址和邮箱(源码和效果)
-
实现功能：Python数据分析实战-利用正则表达式提取文本中的URL网址和邮箱...
- python爬虫教程之爬取当当网 Top 500 本五星好评书籍
-
我们使用requests和re来写一个爬虫作为一个爱看书的你（说的跟真的似的）怎么能发现好书呢？所以我们爬取当当网的前500本好五星评书籍怎么样？ok接下来就是学习python的正确姿...
- 深入理解re模块:Python中的正则表达式神器解析
-
在Python中，"re"是一个强大的模块，用于处理正则表达式（regularexpressions）。正则表达式是一种强大的文本模式匹配工具，用于在字符串中查找、替换或提取特定模式...
- 如何使用正则表达式和 Python 匹配不以模式开头的字符串
-
需要在Python中使用正则表达式来匹配不以给定模式开头的字符串吗？如果是这样，你可以使用下面的语法来查找所有的字符串，除了那些不以https开始的字符串。r"^(?!https).*&...
- 先Mark后用!8分钟读懂 Python 性能优化
-
从本文总结了Python开发时，遇到的性能优化问题的定位和解决。概述：性能优化的原则——优化需要优化的部分。性能优化的一般步骤：首先，让你的程序跑起来结果一切正常。然后，运行这个结果正常的代码，看看它...
- Python“三步”即可爬取，毋庸置疑
-
声明：本实例仅供学习，切忌遵守robots协议，请不要使用多线程等方式频繁访问网站。#第一步导入模块importreimportrequests#第二步获取你想爬取的网页地址，发送请求，获取网页内...
- 简单学Python——re库(正则表达式)2(split、findall、和sub)
-
1、split（）：分割字符串，返回列表语法：re.split（'分隔符','目标字符串'）例如：importrere.split('，','...
- Lavazza拉瓦萨再度牵手上海大师赛
-
阅读此文前，麻烦您点击一下“关注”，方便您进行讨论和分享。Lavazza拉瓦萨再度牵手上海大师赛标题:2024上海大师赛:网球与咖啡的浪漫邂逅在2024年的上海劳力士大师赛上,拉瓦萨咖啡再次成为官...
- ArkUI-X构建Android平台AAR及使用
-
本教程主要讲述如何利用ArkUI-XSDK完成AndroidAAR开发，实现基于ArkTS的声明式开发范式在android平台显示。包括：1.跨平台Library工程开发介绍...
- Deepseek写歌详细教程（怎样用deepseek写歌功能）
-
以下为结合DeepSeek及相关工具实现AI写歌的详细教程，涵盖作词、作曲、演唱全流程：一、核心流程三步法1.AI生成歌词-打开DeepSeek（网页/APP/API），使用结构化提示词生成歌词：...
- “AI说唱解说影视”走红，“零基础入行”靠谱吗?本报记者实测
-
“手里翻找冻鱼，精心的布局；老漠却不言语，脸上带笑意……”《狂飙》剧情被写成歌词，再配上“科目三”背景音乐的演唱，这段1分钟30秒的视频受到了无数网友的点赞。最近一段时间随着AI技术的发展，说唱解说影...
- AI音乐制作神器揭秘!3款工具让你秒变高手
-
在音乐创作的领域里，每个人都有一颗想要成为大师的心。但是面对复杂的乐理知识和繁复的制作过程，许多人的热情被一点点消磨。...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 30天学会Python编程:16. Python常用标准库使用教程
- 强烈推荐!Python 这个宝藏库 re 正则匹配
- Python爬虫中正则表达式的用法，只讲如何应用，不讲原理
- Python数据分析实战-正则提取文本的URL网址和邮箱(源码和效果)
- python爬虫教程之爬取当当网 Top 500 本五星好评书籍
- 深入理解re模块:Python中的正则表达式神器解析
- 如何使用正则表达式和 Python 匹配不以模式开头的字符串
- 先Mark后用!8分钟读懂 Python 性能优化
- Python“三步”即可爬取，毋庸置疑
- 简单学Python——re库(正则表达式)2(split、findall、和sub)
- 标签列表
-
- 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)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- 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)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)