7个 Vue 路由守卫的执行顺序（vue的路由守卫实现原理）
ztj100 2025-03-25 19:39 33 浏览 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搜【程序员大澈】，最后感谢朋友们给个点赞、分享、推荐，拜拜~
相关推荐
- Linux集群自动化监控系统Zabbix集群搭建到实战
-
自动化监控系统...
- systemd是什么如何使用_systemd/system
-
systemd是什么如何使用简介Systemd是一个在现代Linux发行版中广泛使用的系统和服务管理器。它负责启动系统并管理系统中运行的服务和进程。使用管理服务systemd可以用来启动、停止、...
- Linux服务器日常巡检脚本分享_linux服务器监控脚本
-
Linux系统日常巡检脚本，巡检内容包含了，磁盘，...
- 7，MySQL管理员用户管理_mysql 管理员用户
-
一、首次设置密码1.初始化时设置（推荐）mysqld--initialize--user=mysql--datadir=/data/3306/data--basedir=/usr/local...
- Python数据库编程教程:第 1 章 数据库基础与 Python 连接入门
-
1.1数据库的核心概念在开始Python数据库编程之前，我们需要先理解几个核心概念。数据库（Database）是按照数据结构来组织、存储和管理数据的仓库，它就像一个电子化的文件柜，能让我们高效...
- Linux自定义开机自启动服务脚本_linux添加开机自启动脚本
-
设置WGCloud开机自动启动服务init.d目录下新建脚本在/etc/rc.d/init.d新建启动脚本wgcloudstart.sh，内容如下...
- linux系统启动流程和服务管理，带你进去系统的世界
-
Linux启动流程Rhel6启动过程：开机自检bios-->MBR引导-->GRUB菜单-->加载内核-->init进程初始化Rhel7启动过程：开机自检BIOS-->M...
- CentOS7系统如何修改主机名_centos更改主机名称
-
请关注本头条号，每天坚持更新原创干货技术文章。如需学习视频，请在微信搜索公众号“智传网优”直接开始自助视频学习1.前言本文将讲解CentOS7系统如何修改主机名。...
- 前端工程师需要熟悉的Linux服务器(SSH 终端操作)指令
-
在Linux服务器管理中，SSH（SecureShell）是远程操作的核心工具。以下是SSH终端操作的常用命令和技巧，涵盖连接、文件操作、系统管理等场景：一、SSH连接服务器1.基本连接...
- Linux开机自启服务完全指南:3步搞定系统服务管理器配置
-
为什么需要配置开机自启？想象一下：电商服务器重启后，MySQL和Nginx没自动启动，整个网站瘫痪！这就是为什么开机自启是Linux运维的必备技能。自启服务能确保核心程序在系统启动时自动运行，避免人工...
- Kubernetes 高可用(HA)集群部署指南
-
Kubernetes高可用（HA）集群部署指南本指南涵盖从概念理解、架构选择，到kubeadm高可用部署、生产优化、监控备份和运维的全流程，适用于希望搭建稳定、生产级Kubernetes集群...
- Linux项目开发,你必须了解Systemd服务!
-
1.Systemd简介...
- Linux系统systemd服务管理工具使用技巧
-
简介：在Linux系统里，systemd就像是所有进程的“源头”，它可是系统中PID值为1的进程哟。systemd其实是一堆工具的组合，它的作用可不止是启动操作系统这么简单，像后台服务...
- Linux下NetworkManager和network的和平共处
-
简介我们在使用CentoOS系统时偶尔会遇到配置都正确但network启动不了的问题，这问题经常是由NetworkManager引起的，关闭NetworkManage并取消开机启动network就能正...
欢迎 你 发表评论:
- 一周热门
-
-
MySQL中这14个小玩意，让人眼前一亮!
-
旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起
-
面试官:使用int类型做加减操作，是线程安全吗
-
C++编程知识:ToString()字符串转换你用正确了吗?
-
【Spring Boot】WebSocket 的 6 种集成方式
-
PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL
-
pytorch中的 scatter_()函数使用和详解
-
与 Java 17 相比，Java 21 究竟有多快?
-
基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化
-
这一次，彻底搞懂Java并发包中的Atomic原子类
-
- 最近发表
-
- Linux集群自动化监控系统Zabbix集群搭建到实战
- systemd是什么如何使用_systemd/system
- Linux服务器日常巡检脚本分享_linux服务器监控脚本
- 7，MySQL管理员用户管理_mysql 管理员用户
- Python数据库编程教程:第 1 章 数据库基础与 Python 连接入门
- Linux自定义开机自启动服务脚本_linux添加开机自启动脚本
- linux系统启动流程和服务管理，带你进去系统的世界
- CentOS7系统如何修改主机名_centos更改主机名称
- 前端工程师需要熟悉的Linux服务器(SSH 终端操作)指令
- Linux开机自启服务完全指南:3步搞定系统服务管理器配置
- 标签列表
-
- 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)