当前位置: 首页 > news >正文

vue3 路由守卫

    在Vue 3中,路由守卫是一种控制和管理路由跳转的机制。它允许你在执行导航前后进行一些逻辑处理,比如权限验证、数据预取等,从而增强应用的安全性和效率。路由守卫分为几种不同的类型,每种类型的守卫都有其特定的应用场景。

    其实路由守卫跟生命周期的钩子函数有相似之处,都是在特定的时机执行特定函数 , 不过路由守卫主要关注的是路由级别的导航控制,而生命周期钩子则更侧重于组件自身的状态变化。

全局守卫

import { createRouter, createWebHistory } from 'vue-router';/ 全局前置守卫
router.beforeEach((to, from, next) => {// 执行权限验证等操作console.log('全局前置守卫');next();
});// 全局解析守卫
router.beforeResolve((to, from, next) => {// 执行某些操作console.log('全局解析守卫');next();
});// 全局后置守卫
router.afterEach((to, from) => {// 执行某些操作console.log('全局后置守卫');
});

  • 全局前置守卫 (beforeEach): 在路由跳转之前执行,在导航开始时最早被调用,通常用于权限验证或登录判断。
  • 全局解析守卫 (beforeResolve): 在导航被确认之前,所有组件内守卫和异步路由组件被解析之后调用。
  • 全局后置守卫 (afterEach): 在路由跳转后执行,常用于页面加载完成后的操作,比如页面标题的更新。

其中函数的参数中

to 与 from :  to指的是要导航到的组件,而from是从哪个组件来,to和from都是对象,可以从里面拿到路径,参数,等等一系列的数据

next : 一个函数,用于控制路由导航的流程

  • next():继续导航。
  • next(false):取消导航。
  • next({ path: '/new-path' }):传入对象,与to中写法类似。
  • next(new Error('Error message')):中断导航并传递错误。
  • next(vm => { ... }):在 beforeRouteEnter 中使用,获取组件实例。

路由独享守卫

  • 路由独享守卫 (beforeEnter): 在每次导航匹配到该路由时调用 ,只作用于某个具体的路由,可以在路由配置中定义,用于在特定路由进入前执行操作。
{path: '/person',name: 'person',component: person,beforeEnter: (to, from, next) => {// 路由进入前的操作console.log('路由独享守卫 person路由进入前的操作');next();}},

 

  独享守卫是在具体的某条路由规则里面配置的,因此需要写在规则中,且只有要路由到目标组件前时才触发 ,触发时机在beforeEach之后,beforeRouteEnter之前

组件内守卫

<script lang="ts" setup namespace="person">
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';// 离开前守卫
onBeforeRouteLeave((to, from) => {console.log('组件路由离开前 beforeRouteLeave');
});// 依然是当前组件,但是参数更新,如params,query参数
onBeforeRouteUpdate((to, from) => {console.log('组件更新了Route updated');
});
</script><script lang="ts">
/*  这里请注意, vue3的setup,是组件创建时候的钩子因此在setup里面是写不了beforeRouteEnter的beforeRouteEnter是在导航进入该组件之前被调用的*/
import { defineComponent } from 'vue';
export default defineComponent({beforeRouteEnter(to, from, next) {console.log('组件路由进入前 beforeRouteEnter');next();}})</script>

路由进入有组件内路由守卫的组件

离开

在组件参数变化时候

  • beforeRouteEnter: 在路由进入前执行的操作,但在组件实例被创建之前调用,因此不能访问组件实例 , 也不能写在vue3的 setup标签内。
  • onBeforeRouteUpdate: 在路由更新时执行的操作,比如路由参数发生变化时。
  • onBeforeRouteLeave: 在路由离开前执行的操作,可以访问组件实例。

总结

守卫执行顺序

导航到了不同的组件,执行顺序如下:

1. from 的组件内守卫 beforeRouteLeave (如果配置了)

2.全局前置守卫

3.to 的路由独享守卫 (如果配置了)

4.to 的组件内守卫beforeRouteEnter (如果配置了)

5. 全局解析守卫

6.全局后置守卫

导航到了相同的组件,但是参数发生了变化执行顺序如下:

1.全局前置守卫

2.组件内守卫onBeforeRouteUpdater (如果配置了)

3. 全局解析守卫

4.全局后置守卫

注意点

  • 在使用路由守卫时,确保总是调用 next() 函数,除非你明确想要阻止导航。
  • 如果守卫中包含异步操作,确保在异步操作完成后再调用 next(),否则可能会导致路由被阻止。
  • 多个守卫函数会按照注册的顺序依次执行,afterEach 守卫会在所有守卫完成后执行。

相关文章:

vue3 路由守卫

在Vue 3中&#xff0c;路由守卫是一种控制和管理路由跳转的机制。它允许你在执行导航前后进行一些逻辑处理&#xff0c;比如权限验证、数据预取等&#xff0c;从而增强应用的安全性和效率。路由守卫分为几种不同的类型&#xff0c;每种类型的守卫都有其特定的应用场景。 其实路…...

【MATLAB源码-第218期】基于matlab的北方苍鹰优化算法(NGO)无人机三维路径规划,输出做短路径图和适应度曲线.

操作环境&#xff1a; MATLAB 2022a 1、算法描述 北方苍鹰优化算法&#xff08;Northern Goshawk Optimization&#xff0c;简称NGO&#xff09;是一种新兴的智能优化算法&#xff0c;灵感来源于北方苍鹰的捕猎行为。北方苍鹰是一种敏捷且高效的猛禽&#xff0c;广泛分布于北…...

如何控制自己玩手机的时间?两台苹果手机帮助自律

对一些人来说&#xff0c;被智能手机“绑架”是一件心甘情愿的事&#xff0c;和它相处的一天中&#xff0c;不必面对现实的压力&#xff0c;它就像个“舒适区”。这是因为在使用手机的过程中&#xff0c;应用程序&#xff08;尤其是游戏和社交媒体应用&#xff09;会不断刺激大…...

【java-Neo4j 5开发入门篇】-最新Java开发Neo4j

系列文章目录 前言 上一篇文章讲解了Neo4j的基本使用&#xff0c;本篇文章对Java操作Neo4j进行入门级别的阐述&#xff0c;方便读者快速上手对Neo4j的开发。 一、开发环境与代码 1.docker 部署Neo4j #这里使用docker部署Neo4j,需要镜像加速的需要自行配置 docker run --name…...

Python的3D可视化库 - vedo (1)简介和模块功能概览

文章目录 1. vedo和它支持的功能简介1.1 安装vedo1.2 命令行接口1.3 导出3D文件1.4 文件格式转换 2. vedo模块功能概览2.1 绘制和渲染visual 管理可视化、对象及其属性的显示的基类plotter 3D渲染colors 定义和显示颜色dolfin FEniCS/Dolfin库的支持 2.2 图形数据管理mesh 多边…...

全面解析:HTML页面的加载全过程(一)--输入URL地址,与服务器建立连接

用户输入URL地址&#xff0c;与服务器建立连接 用户在浏览器地址栏输入一个URL 浏览器开始执行以下三步操作操作&#xff1a;url解析、DNS查询、TCP连接 第一步&#xff1a;URL解析 什么是URL&#xff1f; URL(Uniform Resource Locator&#xff0c;统一资源定位符)是互联网…...

elasticsearch的倒排索引是什么?

大家好&#xff0c;我是锋哥。今天分享关于【elasticsearch的倒排索引是什么&#xff1f;】面试题。希望对大家有帮助&#xff1b; elasticsearch的倒排索引是什么&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 倒排索引&#xff08;Inverted Index&a…...

Ubuntu VNC Session启动chromium和firefox报错

问题描述 VNC客户端连接到Ubuntu Server后&#xff0c;启动chromium和firefox时报错&#xff1a; $ chromium [348564:348564:1117/102143.085649:ERROR:ozone_platform_x11.cc(244)] Missing X server or $DISPLAY [348564:348564:1117/102143.085732:ERROR:env.cc(258)] Th…...

【Tealscale + Headscale + 自建服务器】异地组网笔记

文章目录 效果为什么要用 Headscale云服务器安装 Headscale配置 config.yaml创建反向代理搭建管理 UI授权管理 UI添加互联设备参考 效果 首先是连接情况&#xff0c;双端都连接上自建的 Headscale&#xff0c; 手机使用移动流量&#xff0c;测试一下 ping 值 再试试进入游戏 可…...

C++ 编程基础(8)模版 | 8.2、函数模版

文章目录 一、函数模版1、声明与定义2、模版参数3、模板的实例化3.1、隐式实例化3.2、显示实例化 4、模版的特化5、注意事项6、总结 前言&#xff1a; C 函数模板是一种强大的特性&#xff0c;它允许程序员编写与类型无关的代码。通过使用模板&#xff0c;函数或类可以处理不同…...

Android Studio音频视频播放器课程设计

这个项目适合刚刚学习Android studio的初学者&#xff0c;实现音视频的基本播放功能&#xff0c;各项功能的页面都做的比较简单&#xff0c;特别适用于初学者&#xff0c;其特点在于本项目抛开了各种花里胡哨的制作&#xff0c;以最接近初学者的样式画面呈现&#xff0c;完全不…...

速盾:CDN是否支持屏蔽IP?

CDN&#xff08;内容分发网络&#xff09;是一种用于提高网站性能和可靠性的技术&#xff0c;通过将内容分发到距离终端用户更近的节点&#xff0c;减少了数据传输的延迟并提高了用户体验。在CDN中&#xff0c;屏蔽IP是一项重要的功能&#xff0c;可以帮助网站屏蔽无效或恶意请…...

机器学习—学习曲线

学习曲线是帮助理解学习算法如何工作的一种方法&#xff0c;作为它所拥有的经验的函数。 绘制一个符合二阶模型的学习曲线&#xff0c;多项式或二次函数&#xff0c;画出交叉验证错误Jcv&#xff0c;以及Jtrain训练错误&#xff0c;所以在这个曲线中&#xff0c;横轴将是Mtrai…...

在 macOS 和 Linux 中,波浪号 `~`的区别

文章目录 1、在 macOS 和 Linux 中&#xff0c;波浪号 ~macOS示例 Linux示例 区别总结其他注意事项示例macOSLinux 结论 2、root 用户的主目录通常是 /root解释示例切换用户使用 su 命令使用 sudo 命令 验证当前用户总结 1、在 macOS 和 Linux 中&#xff0c;波浪号 ~ 在 macO…...

【Java】实战:多数元素

一、题目描述 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&#xff1a;nums [3,2,3] 输出&#x…...

一文解决Latex中的eps报错eps-converted-to.pdf not found: using draft setting.

在使用Vscode配的PDFLatex编译IEEE TII的Latex模板时&#xff0c;出现eps文件不能转换为pdf错误&#xff0c;看了几十篇方法都没用&#xff0c;自己研究了半天终于可以正常运行了。主要原因还是Settings.JSON中的PDFLatex模块缺少&#xff1a;"--shell-escape", 命令…...

计算光纤色散带来的相位移动 matlab

需要注意的地方 1.以下内容纯属个人理解&#xff0c;很有可能不准确&#xff0c;请大家仅做参考 2.光速不要直接用3e8 m/s&#xff0c;需要用精确的2.9979.... 3.光的频率无论在真空还是光纤(介质)都是不变的&#xff0c;是固有属性&#xff0c;但是波长lambdac/f在不同的介…...

国内docker pull拉取镜像的解决方法

访问网站&#xff0c;查找该网站上可用的镜像源&#xff0c;然后替换掉下面代码中的hub-mirror.c.163.com&#xff1a; docker pull hub-mirror.c.163.com/library/nginx:latest 另外&#xff0c;进入到镜像之后&#xff0c;可以使用下面的命令查看操作系统版本。 lsb_releas…...

“Kafka面试攻略:核心问题与高效回答”

1&#xff0c;生产者发送消息的原理 发送消息的过程中&#xff0c;涉及到两个线程&#xff0c;main线程和sender线程&#xff0c;main线程会创建一个双端队列&#xff0c;main线程向双端队列发送消息&#xff0c;sender线程从双端队列里拉取消息&#xff0c;发送给Kafka Broke…...

C++ 多线程std::thread以及条件变量和互斥量的使用

前言 本文章主要介绍C11语法中std::thread的使用&#xff0c;以及条件变量和互斥量的使用。 std::thread介绍 构造函数 std::thread 有4个构造函数 // 默认构造函&#xff0c;构造一个线程对象&#xff0c;在这个线程中不执行任何处理动作 thread() noexcept;// 移动构造函…...

沈阳装修靠谱的机构

在沈阳装修新家&#xff0c;最怕遇到不靠谱的装修公司——工期拖延、增项不断、工艺粗糙、售后无门。想要省心、放心、安心地完成装修&#xff0c;选择一家经验丰富、工艺扎实、信誉良好的机构至关重要。在众多沈阳装修公司中&#xff0c;沈阳富田装饰装修工程有限公司以其深厚…...

3分钟搞定!LyricsX让你的macOS音乐播放器拥有完美歌词体验

3分钟搞定&#xff01;LyricsX让你的macOS音乐播放器拥有完美歌词体验 【免费下载链接】LyricsX &#x1f3b6; Ultimate lyrics app for macOS. 项目地址: https://gitcode.com/gh_mirrors/ly/LyricsX 还在为macOS上的音乐播放器找不到合适的歌词而烦恼吗&#xff1f;L…...

Qt 5.12.8在Linux下编译qtvirtualkeyboard模块,我踩过的那些坑(附完整解决方案)

Qt 5.12.8在Linux下编译qtvirtualkeyboard模块的深度实践指南 当你在嵌入式或跨平台开发中突然发现系统自带的Qt缺少虚拟键盘模块时&#xff0c;那种感觉就像在沙漠里找到一瓶水却发现没带开瓶器。本文将带你深入探索在aarch64架构的Linux系统中&#xff0c;如何为预装的Qt 5.1…...

3分钟搞定Vue时间轴组件:打造优雅时间线应用的终极指南

3分钟搞定Vue时间轴组件&#xff1a;打造优雅时间线应用的终极指南 【免费下载链接】timeline-vuejs Minimalist Timeline ⏳ with VueJS &#x1f49a; 项目地址: https://gitcode.com/gh_mirrors/ti/timeline-vuejs 还在为Vue项目中的时间线展示而烦恼吗&#xff1f;t…...

雷达点云与相机标定避坑指南:如何用MATLAB Lidar Camera Calibrator提高标定精度

MATLAB Lidar Camera Calibrator实战&#xff1a;高精度标定的7个关键步骤与避坑策略 当激光雷达与相机数据需要融合时&#xff0c;标定精度直接决定了后续感知算法的上限。许多工程师在首次使用MATLAB Lidar Camera Calibrator时&#xff0c;常因自动标定结果不理想而陷入困惑…...

36 Python 时序和文本:中文文本处理入门:为什么要先做分词和停用词过滤?

中文文本处理入门&#xff1a;为什么要先做分词和停用词过滤&#xff1f; 刚接触文本分析时&#xff0c;很多人都会有一个疑问&#xff1a; 文本明明已经有内容了&#xff0c;为什么不能直接拿去做分类、聚类或者情感分析&#xff1f; 这个问题其实正好指向了文本挖掘里最基础、…...

Babel polyfill配置全解析:为什么你的Next.js项目在IE11还是报错?

Babel polyfill配置全解析&#xff1a;为什么你的Next.js项目在IE11还是报错&#xff1f; 在2023年的前端生态中&#xff0c;浏览器兼容性依然是个令人头疼的问题。最近接手一个企业级Next.js项目时&#xff0c;我遇到了一个典型场景&#xff1a;开发环境一切正常&#xff0c;但…...

首款支持AI渗透的WebShell管理工具,聊个天就能实现免杀|实现高隐蔽内网渗透

0x01 工具介绍 金刚狼首款支持 AI 渗透的 WebShell MCP&#xff0c;也是一款支持多层内网级联的 ASPX、ASHX 高级 WebShell 管理工具。工具采用 AES 加密通信&#xff0c;无需代理即可实现内网穿透&#xff0c;支持内存加载各类渗透工具&#xff0c;做到无文件落地隐蔽渗透目标…...

【linux】Xorg与X Window System的交互机制解析

1. X Window System与Xorg的关系 当你打开Linux电脑看到图形界面时&#xff0c;背后默默工作的就是X Window System。这个诞生于1984年的图形系统至今仍是Linux桌面环境的基石&#xff0c;而Xorg则是它的现代实现版本。简单来说&#xff0c;X Window System定义了图形显示的标准…...

告别两阶段!用单个冻结的ConvNeXt CLIP搞定开放词汇分割,速度提升6.6倍

FC-CLIP&#xff1a;用冻结卷积CLIP重塑开放词汇分割的工程实践 开放词汇分割技术正在彻底改变计算机视觉应用的边界。想象一下&#xff0c;当自动驾驶车辆遇到从未在训练数据中出现过的障碍物&#xff0c;或是电商平台需要即时识别刚刚上市的新商品时&#xff0c;传统封闭词汇…...