vue保姆级教程----深入了解 Vue3路由守卫

📢 鸿蒙专栏:想学鸿蒙的,冲

📢 C语言专栏:想学C语言的,冲

📢 VUE专栏:想学VUE的,冲这里

📢 CSS专栏:想学CSS的,冲这里

📢 Krpano专栏:想学VUE的,冲这里

🔔 上述专栏,都在不定期持续更新中!!!!!!!!!!!!!

目录

✨ 前言

全局前置守卫

全局解析守卫

全局后置钩子

路由独享守卫

组件内守卫

完整的导航解析流程

 实现原理

🔔 实现机制

🔔 全局守卫

🔔 组件内守卫

🔔 next 函数

🔔 总结

✨ 结语


 

✨ 前言

        导航守卫是Vue Router中非常重要的一个功能,它可以让我们在路由导航期间进行Hooks操作,比如登录校验、数据预取、页面跳转取消等。合理利用好导航守卫可以大大提高路由的可控性。

        本文将首先介绍导航守卫的种类,包括全局守卫、独享守卫、组件内守卫。然后结合代码示例详细探讨每个守卫的使用场景和方法。

        此外,文中还会剖析导航守卫的内部实现原理,了解其工作流程和 Hooks 调用顺序。守卫函数其实是基于路由系统内部的 Navigation Guards 系统实现的。通过分析其机制,可以更深入理解守卫的运行规则。

        最后,本文将给出一些实战技巧,帮助开发者思考在什么场景下使用哪种类型的导航守卫,以提高实际项目中的开发效率。

        如果你想深入理解导航守卫,或者想在Vue项目中合理利用它们加强路由控制,本文将是一个很好的学习参考。结合示例代码可以快速上手应用。让我们开始探索导航守卫的世界吧!

全局前置守卫

// router.js
router.beforeEach((to, from) => {// ...
})

全局前置守卫在每次路由导航前被调用,常用于登录校验、权限检查等。

全局解析守卫

router.beforeResolve((to, from) => {// ...
})

在 navigation 被确认之前调用,组件内守卫和异步路由组件被解析之后调用。

全局后置钩子

router.afterEach((to, from) => {// ...  
})

导航被确认时调用,不再像前置守卫那样改变导航。

路由独享守卫

const routes = [{path: '/about',component: About,beforeEnter: (to, from) => {// ...}
}]

在进入某个路由前被调用。

组件内守卫

const Foo = {beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不!能!获取组件实例 `this`// 因为当守卫执行前,组件实例还没被创建},beforeRouteUpdate(to, from, next) {// 在当前路由改变,但是该组件被复用时调用// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},beforeRouteLeave(to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}
}

组件内守卫只在进入/离开当前组件的路由时被调用。

完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
  5. 在路由配置里调用 beforeEnter
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter
  8. 调用全局的 beforeResolve 守卫(2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

以上就是 Vue Router 4 中导航守卫的详细介绍,可以利用好这些钩子函数对路由进行更多控制。

 实现原理

🔔 实现机制

  • 导航守卫的核心是路由系统内部的 Navigation Guards 机制。包括 beforeEach、beforeResolve 等函数。
  • 导航过程中会依次调用这些 Guard 函数,并传入 to、from 等路由信息。
  • 每个 Guard 都可以调用 next() 继续pipieline,或者 next(false) 中断导航。

🔔 全局守卫

  • router.beforeEach等注册的守卫会被添加为 Global Before Guards。
  • 会按顺序调用整个 Guard 链,最终执行 router.push 触发导航。

🔔 组件内守卫

  • 组件内的 beforeRouteEnter 等会作为 Component Guards 添加到 Guard 链中。
  • 会在激活组件时调用,执行顺序遵循整个导航解析流程。

🔔 next 函数

  • next 可以接收 false、location 或 error 作为参数来控制流程。
  • 内部通过 callHook 继续执行 Guard 链,或中断导航。

🔔 总结

  • 导航守卫利用了路由系统内部的导航解析流程和钩子函数。
  • 明确其调用时机和 next 函数的作用非常重要,才能灵活运用。

✨ 结语

        在这篇文章中,我们全面地介绍了Vue Router中的导航守卫,包括:

  • 不同类型的导航守卫以及使用场景
  • 导航守卫的内部实现原理
  • next 函数的作用方式
  • 导航解析流程和守卫调用顺序

        导航守卫是一个非常强大的路由功能,可以让我们在页面导航的每一个时机进行控制或干预。

        正确掌握并应用导航守卫,可以防止非法访问,处理异步数据,实现路由权限管理等等。

        希望这篇文章能让你对导航守卫有一个系统的理解,在Vue项目中能灵活地把控路由流程,处理导航中的各种情形。

        如果你有任何问题,欢迎在评论区与我互动讨论。祝你的Vue之路越走越好!

        我们改日再会!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/321187.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android Jetpack学习系列——Navigation

写在前面 Google在2018年就推出了Jetpack组件库,但是直到今天我才给重视起来,这真的不得不说是一件让人遗憾的事。过去几年的空闲时间里,我一直在尝试做一套自己的组件库,帮助自己快速开发,虽然也听说过Jetpack&#…

OpenVINS学习5——VioManager.cpp/h学习与注释

前言 之前又看到说VioManager.cpp/h是OpenVINS中的核心程序,这次就看看这里面都写了啥,整体架构什么样,有哪些函数功能。具体介绍: VioManager类 整体分析 VioManager类包含 MSCKF 工作所需的状态和其他算法。我们将测量结果输…

【MongoDB】关于MongoDB更新文档update的操作,十分详细,建议收藏!!!

😁 作者简介:一名大四的学生,致力学习前端开发技术 ⭐️个人主页:夜宵饽饽的主页 ❔ 系列专栏:MongoDB数据库学习 👐学习格言:成功不是终点,失败也并非末日,最重要的是继…

el-select 多选,选有一个未选择的选项

多选有未选择这个选项后。会出现一个情况,绑定的数据为[‘未选择’,‘cpu1’,‘cpu2’] 进行一个处理,选择(未选择)就清除(其它的选择),选择(cpu)就清除(未选…

Android Studio新手实战——深入学习Activity组件

目录 前言 一、Activity简介 二、任务栈相关概念 三、常用Flag 四、结束当前Activity 五、Intent跳转Activity 六、更多资源 前言 Android是目前全球最流行的移动操作系统之一,而Activity作为Android应用程序的四大组件之一,是Android应用程序的核…

使用valgrind 分析缓存命中

使用valgrind 分析缓存命中 char transpose_submit_desc[] "Transpose submission"; void transpose_submit(int M, int N, int A[N][M], int B[M][N]) { int i,j,tmp;int bsize 8;unsigned long long addrA;unsigned long long addrB;unsigned long long setin…

IO作业4.0

思维导图 创建出三个进程完成两个文件之间拷贝工作&#xff0c;子进程1拷贝前一半内容&#xff0c;子进程2拷贝后一半内容&#xff0c;父进程回收子进程的资源 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <myhead.h> int …

Spring AOP的环境搭建、切入点表达式、通知注解

Spring AOP的实现 Spring AOP环境搭建AOP坐标依赖引入添加xml配置实现三层架构 定义切入点Pointcut("匹配规则")切入点表达式1. 执行所有的公共方法2.执行任意的set方法3.设置指定包下的任意类的任意方法 (指定包: com.svt.service)4.设置指定包及于包下的任意类的任…

手把手教你在Ubuntu22上安装VideoRetalking

VideoReTalking是一种新系统&#xff0c;可以根据输入音频编辑真实世界的谈话头部视频的面孔&#xff0c;即使具有不同的情感&#xff0c;也能生成高质量和口型同步的输出视频。我们的系统将这个目标分解为三个连续的任务&#xff1a; &#xff08;1&#xff09;具有规范表情的…

LCR 176. 判断是否为平衡二叉树

解题思路&#xff1a; class Solution {public boolean isBalanced(TreeNode root) {return recur(root) ! -1;}private int recur(TreeNode root) {if (root null) return 0;int left recur(root.left);if(left -1) return -1;int right recur(root.right);if(right -1) …

【AI】LoFTR图像匹配算法源码解析

0.LoFTR简介 Local Feature Transformers &#xff08;LoFTR&#xff09;是一种Detector-free的局部特征匹配方法&#xff0c;使用了具有自注意层和互注意层的Transformer模块来处理从卷积网络中提取的密集局部特征&#xff1a;首先在低特征分辨率&#xff08;图像维度的1/8&a…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Column组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之线性布局容器Column组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Column组件 沿垂直方向布局的容器。 子组件 可以包含子组件。 接…