7个 Vue 路由守卫的执行顺序（vue的路由守卫实现原理）
ztj100 2025-03-25 19:39 14 浏览 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搜【程序员大澈】，最后感谢朋友们给个点赞、分享、推荐，拜拜~
相关推荐
- 使用 Pinia ORM 管理 Vue 中的状态
-
转载说明：原创不易，未经授权，谢绝任何形式的转载状态管理是构建任何Web应用程序的重要组成部分。虽然Vue提供了管理简单状态的技术，但随着应用程序复杂性的增加，处理状态可能变得更具挑战性。这就是为什么...
- Vue3开发企业级音乐Web App 明星讲师带你学习大厂高质量代码
-
Vue3开发企业级音乐WebApp明星讲师带你学习大厂高质量代码下栽课》jzit.top/392/...
- 一篇文章说清 webpack、vite、vue-cli、create-vue 的区别
-
webpack、vite、vue-cli、create-vue这些都是什么？看着有点晕，不要怕，我们一起来分辨一下。...
- 超赞 vue2/3 可视化打印设计VuePluginPrint
-
今天来给大家推荐一款非常不错的Vue可拖拽打印设计器Hiprint。引入使用//main.js中引入安装import{hiPrintPlugin}from'vue-plugin-...
- 搭建Trae+Vue3的AI开发环境（vue3 ts开发）
-
从2024年2025年，不断的有各种AI工具会在自媒体中火起来，号称各种效率王炸，而在AI是否会替代打工人的话题中，程序员又首当其冲。...
- Vue中mixin怎么理解?（vue的mixins有什么用）
-
作者：qdmryt转发链接：https://mp.weixin.qq.com/s/JHF3oIGSTnRegpvE6GSZhg前言...
- Vue脚手架安装，初始化项目，打包并用Tomcat和Nginx部署
-
1.创建Vue脚手架#1.在本地文件目录创建my-first-vue文件夹，安装vue-cli脚手架:npminstall-gvue-cli安装过程如下图所示：创建my-first-vue...
- 新手如何搭建个人网站（小白如何搭建个人网站）
-
ElementUl是饿了么前端团队推出的桌面端UI框架，具有是简洁、直观、强悍和低学习成本等优势，非常适合初学者使用。因此，本次项目使用ElementUI框架来完成个人博客的主体开发，欢迎大家讨论...
- 零基础入门vue开发（vue快速入门与实战开发）
-
上面一节我们已经成功的安装了nodejs，并且配置了npm的全局环境变量，那么这一节我们就来正式的安装vue-cli，然后在webstorm开发者工具里运行我们的vue项目。这一节有两种创建vue项目...
- .net core集成vue（.net core集成vue3）
-
react、angular、vue你更熟悉哪个？下边这个是vue的。要求需要你的计算机安装有o.netcore2.0以上版本onode、webpack、vue-cli、vue（npm...
- 使用 Vue 脚手架，为什么要学 webpack?(一)
-
先问大家一个很简单的问题：vueinitwebpackprjectName与vuecreateprojectName有什么区别呢？它们是Vue-cli2和Vue-cli3创建...
- vue 构建和部署（vue项目部署服务器）
-
普通的搭建方式（安装指令）安装Node.js检查node是否已安装，终端输入node-v会使用命令行（安装）npminstallvue-cli-首先安装vue-clivueinitwe...
- Vue.js 环境配置（vue的环境搭建）
-
说明：node.js和vue.js的关系：Node.js是一个基于ChromeV8引擎的JavaScript运行时环境；类比：Java的jvm(虚拟机)...
- vue项目完整搭建步骤（vuecli项目搭建）
-
简介为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 使用 Pinia ORM 管理 Vue 中的状态
- Vue3开发企业级音乐Web App 明星讲师带你学习大厂高质量代码
- 一篇文章说清 webpack、vite、vue-cli、create-vue 的区别
- 超赞 vue2/3 可视化打印设计VuePluginPrint
- 搭建Trae+Vue3的AI开发环境（vue3 ts开发）
- 如何在现有的Vue项目中嵌入 Blazor项目?
- Vue中mixin怎么理解?（vue的mixins有什么用）
- Vue脚手架安装，初始化项目，打包并用Tomcat和Nginx部署
- 新手如何搭建个人网站（小白如何搭建个人网站）
- 零基础入门vue开发（vue快速入门与实战开发）
- 标签列表
-
- 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)