Vant和ElementPlus在vue的hash模式的路由下路由离开拦截使用Dialog和MessageBox失效
问题复现
ElementPlus:当点击返回或者地址栏回退时,MessageBox无效
<template><div>Element Plus Dialog 路由离开拦截测试</div><el-button type="primary" @click="$router.back()">返回</el-button>
</template><script setup lang="ts">
import { onBeforeRouteLeave } from 'vue-router';
import { ElMessageBox } from 'element-plus'/** 路由拦截 */
onBeforeRouteLeave(async (to, from, next) => {try {await ElMessageBox.confirm('确定要离开吗',{cancelButtonText:'取消',confirmButtonText:'确定',type: 'warning',})next();} catch (error) {next(false);}
});
</script>

Vant:当点击返回或者地址栏回退时,Dialog第一次生效,第二次开始无法生效
<template><div>Vant Plus Dialog 路由离开拦截测试</div><van-button type="primary" @click="$router.back()">返回</van-button>
</template><script setup lang="ts">
import { onBeforeRouteLeave } from "vue-router";
import { Dialog,Toast } from "vant";/** 路由拦截 */
onBeforeRouteLeave(async (to, from, next) => { try {await Dialog.confirm({message: "确定要离开吗",confirmButtonColor: "#357ef7",});next();} catch (error) {next(false);}
});
</script>

失效原因
Vant和ElementPlus的Dialog都有一个当路由地址变化时自动关闭的默认属性(官方文档中有说明)(ElementPlus是当hash变化的时候自动关闭),所以导致我们希望的是Dialog在路由变化的时候生效,但是Dialog在路由地址变化的时候自动小时了,产生了矛盾,所以失效
Vant

ElementPlus

Vant之所以第一次会生效,因为Vant在第一次的时候并未挂载到DOM节点中,导致默认的路由变化关闭Dialog不起作用,但是第二次开始Dialog已经挂载到DOM节点上了,默认路由关闭的属性也就生效了(Vant的Dialog第一次挂载之后不会移除,会通过display属性控制显示隐藏,ElementPlus的MessageBox会动态的挂载和移除,上述GIF的DOM中可以看出二者的差别)

解决方法
方案一:使用history模式
import {createRouter,createWebHistory,createWebHashHistory,RouteRecordRaw,
} from "vue-router";const router = createRouter({history: createWebHistory(),// history: createWebHashHistory(),routes,
});
方案二:关闭对应的路由变化自动关闭的属性
ElementPlus
/** 路由拦截 */
onBeforeRouteLeave(async (to, from, next) => {try {await ElMessageBox.confirm('确定要离开吗',{cancelButtonText:'取消',confirmButtonText:'确定',type: 'warning',// 禁用路由变化自动关闭closeOnHashChange:false})next();} catch (error) {next(false);}
});
Vant
/** 路由拦截 */
onBeforeRouteLeave(async (to, from, next) => { try {await Dialog.confirm({message: "确定要离开吗",confirmButtonColor: "#357ef7",// 禁用路由变化自动关闭closeOnPopstate: false,});next();} catch (error) {next(false);}
});
注意
上述的时效问题仅在hash模式的路由且并未关闭默认的路由变化自动关闭的属性时生效,history模式并不会失效
相关文章:
Vant和ElementPlus在vue的hash模式的路由下路由离开拦截使用Dialog和MessageBox失效
问题复现 ElementPlus:当点击返回或者地址栏回退时,MessageBox无效 <template><div>Element Plus Dialog 路由离开拦截测试</div><el-button type"primary" click"$router.back()">返回</el-button>…...
上海市通过区块链技术攻关 构建数字经济可信安全技术底座
日前,上海市印发《上海区块链关键技术攻关专项行动方案(2023—2025年)》(以下简称《行动方案》),提出到2025年,在区块链体系安全、密码算法等基础理论以及区块链专用处理器、智能合约、跨链、新…...
Java 面试题
昨天面试了两个Java开发程序员,问了一些问题,回答的不是很好,看看大家的回答如何,可以在评论区回复,测试下自己的水平。 A程序员: 1. 自我介绍一下; 2. 企业级和互联网行业都有那些项目经验,简…...
layui 表格 展开
一、表格嵌套表格(手风琴打开) <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>设备上下线统计</title><script type"text/javascript" src"../../../l…...
[尚硅谷React笔记]——第4章 React ajax
目录: 脚手架配置代理_方法一 server1.js开启服务器server1:App.js解决跨域问题:脚手架配置代理_方法二 server2.js开启服务器server2第一步:创建代理配置文件编写setupProxy.js配置具体代理规则:App.js运行结果&a…...
Richard Stallman 正在与癌症作战
导读为了纪念 GNU 项目成立 40 周年,自由软件基金会(FSF)已计划在 10 月 1 日(即GNU 40)为家庭、学生以及美国的其他人群组织一场黑客马拉松活动。 活动之前,GNU 项目于 9 月 27 日迎来了 40 岁生日&#…...
MathType7.4最新免费版(公式编辑器)下载安装包附安装教程
MathType是一款专业的数学公式编辑器,理科生专用的必备工具,可应用于教育教学、科研机构、工程学、论文写作、期刊排版、编辑理科试卷等领域。可视化公式编辑器轻松创建数学方程式和化学公式。兼容Office Word、PowerPoint、Pages、Keynote、Numbers 等7…...
如何支持h.265视频
前言 略 h.265视频 h.265是一种视频编码格式。 随着视频编码技术的发展,相比H.264, H.265同等画质体积仅为一半、带宽占用省一半、画质更细腻等诸多优势。 但Web浏览器还不支持H.265的解码播放,因此基于Web Assembly(封装FFmpeg)、JS解封装、Canvas投…...
vue 放大镜(简易)
目录 zoom组件 <template><div class"pic-img"><div class"img-container"><img ref"img" load"imgLoaded" :src"url" :style"overlayStyle" error"imgerrorfun"/><div cl…...
【计算机网络】第一章——概述
个人主页直达:小白不是程序媛 系列专栏:计算机网络基础 目录 前言 计算机网络概述 概念 功能 组成 分类 标准化工作 性能指标 速率 带宽 吞吐量 时延 时延带宽积 往返时延RTT 利用率 分层 为什么要分层? 分层的基本原则&am…...
vue实现在页面拖拽放大缩小div并显示鼠标在div的坐标
1、功能要求: 实现在一个指定区域拖拽div,并可以放大缩小,同时显示鼠标在该div里的坐标,如图可示 缩小并拖动 2、实现 <div class"div_content" ref"div_content"><div class"div_image" id"…...
LuatOS-SOC接口文档(air780E)-- io - io操作(扩展)
示例 -- io模块是lua原生模块,LuatOS增加了一些API -- 请配合os模块一起使用-- 只读模式, 打开文件 local fd io.open("/xxx.txt", "rb") -- 读写默认,打开文件 local fd io.open("/xxx.txt", "wb") -- 写入文件,且截断为0字节 loc…...
【数据结构】线性表(六)堆栈:顺序栈及其基本操作(初始化、判空、判满、入栈、出栈、存取栈顶元素、清空栈)
文章目录 一、堆栈1. 定义2. 基本操作 二、顺序栈0. 顺序表1. 头文件和常量2. 栈结构体3. 栈的初始化4. 判断栈是否为空5. 判断栈是否已满6. 入栈7. 出栈8. 查看栈顶元素9. 清空栈10. 主函数11. 代码整合 堆栈Stack 和 队列Queue是两种非常重要的数据结构,两者都是特…...
父组件可以监听到子组件的生命周期吗?
在 Vue 中,父组件是可以监听到子组件的生命周期的。Vue 提供了一些特殊的钩子函数,可以在父组件中监听子组件的生命周期事件。 以下是一些常用的方法来监听子组件的生命周期: 1:使用$emit: 在子组件的生命周期钩子函数中,使用 $emit 方法触发自定义事件,向父组件发送通…...
[开源]MIT开源协议,基于Vue3.x可视化拖拽编辑,页面生成工具
一、开源项目简介 AS-Editor 基于 Vue3.x 可视化拖拽编辑,页面生成工具。提升前端开发效率,可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。 二、开源协议 使用MIT开源协议 三、界面展示 四、功能概述 基于Vue可视化拖拽编辑,…...
【C++ Primer Plus学习记录】数组的替代品
目录 1.模板类vector 2.模板类array(C11) 3.比较数组、vector对象和array对象 模板类vector和array是数组的替代品。 1.模板类vector 模板类vector类似于string类,也是一种动态数组。您可以在运行阶段设置vector对象的长度,可…...
JSP免杀马
JSP免杀马 随着Java框架的进化和程序员的内卷,使用PHP编写的系统越来少,使用Java编写的系统越来越多。JSP马的使用越来越多,但是就目前来看,各大厂商对JSP马的查杀效果还是不尽人意。这里简单通过Java的反射机制和ClassLoader技术…...
2023-10-16 node.js-调用python-记录
NodeJS 作为后端,仅在需要时调用 Python 在某些特殊的场景下,比如复杂耗时的数据处理和运算时,我们可以用 Python 脚本编写,然后使用 Node 的子进程调用 Python 脚本即可,这样可以提升效率。如下代码,我们…...
Kotlin 设置和获取协程名称
1,设置写成名称 创建协程作用域是或者创建协程是有个上下文参数(context: CoroutineContext) 创建协程作用域 CoroutineScope(Dispatchers.IO CoroutineName("协程A"))//Dispatchers.IO根据实际情况设置可有可无 源码…...
awk命令的使用
1.概念: awk是Linux以及UNIX环境中现有的功能最强大的数据处理工具 awk是一种处理文本数据的编程语言。awk的设计使得它非常适合于处理由行和列组成的文本数据 awk程序可以读取文本文件,对数据进行排序,对其中的数值执行计算以及生成报表等…...
地平线推出双五星合规高集成行泊一体方案;芯擎科技发布5nm车规舱驾融合芯片;魔视智能首发国产芯行泊一体域控
芯擎科技发布5nm车规舱驾融合芯片200TOPS算力支持大模型牛喀网获悉,芯擎科技发布5nm车规级舱驾融合芯片“龍鹰二号”,计划2027年第一季度启动适配。该芯片面向AI舱驾融合场景设计,采用柔性架构,可适配不同层级的中央计算平台&…...
vSAN维护模式选‘无操作’就万事大吉?详解关机重启前必须做的5项关键检查
vSAN维护模式选‘无操作’就万事大吉?详解关机重启前必须做的5项关键检查 在虚拟化运维领域,vSAN集群的关机重启操作看似简单,实则暗藏玄机。许多工程师习惯性地选择维护模式中的"无操作"选项,认为这样可以省去数据迁移…...
为什么你的GaN仿真总是不准?可能是这5个物理效应没考虑(附TCAD模型设置详解)
为什么你的GaN仿真总是不准?可能是这5个物理效应没考虑(附TCAD模型设置详解) 在功率电子领域,氮化镓高电子迁移率晶体管(GaN-HEMT)凭借其优异的性能正逐步取代传统硅基器件。然而,许多工程师在…...
**TiDB 在高并发场景下的性能优化实战:从慢查询到极致吞吐的跃迁之路**在当前分布式数据库广泛应用的
TiDB 在高并发场景下的性能优化实战:从慢查询到极致吞吐的跃迁之路 在当前分布式数据库广泛应用的背景下,TiDB 作为一款开源的 HTAP(混合事务/分析处理)数据库,凭借其强一致性、水平扩展能力和与 MySQL 协议的高度兼容…...
如何用WeChatMsg守护你的数字记忆:从聊天记录到个人AI数据中心的蜕变
如何用WeChatMsg守护你的数字记忆:从聊天记录到个人AI数据中心的蜕变 【免费下载链接】WeChatMsg 提取微信聊天记录,将其导出成HTML、Word、CSV文档永久保存,对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Tre…...
Spring Boot多租户实战指南(Tenant-Aware DataSource深度剖析)
更多请点击: https://intelliparadigm.com 第一章:Java 多租户数据安全隔离 在云原生与 SaaS 架构普及的背景下,Java 应用实现多租户(Multi-tenancy)已成为常态。数据安全隔离是其核心挑战——必须确保租户 A 无法访…...
Navicat Premium 16.2.8 保姆级教程:5分钟搞定GaussDB主备版连接与基础配置
Navicat Premium 16.2.8 保姆级教程:5分钟搞定GaussDB主备版连接与基础配置 在数据库管理领域,Navicat Premium 一直以其直观的界面和强大的功能受到开发者和DBA的青睐。最新发布的16.2.8版本对GaussDB主备版的支持更加完善,让这款国产数据库…...
ARM架构CNTHVS_CTL_EL2寄存器详解与虚拟定时器应用
1. ARM架构中的CNTHVS_CTL_EL2寄存器解析在ARMv8-A架构中,系统寄存器扮演着处理器与操作系统间关键桥梁的角色。作为安全虚拟定时器的控制核心,CNTHVS_CTL_EL2寄存器在虚拟化环境中发挥着不可替代的作用。这个64位寄存器专为Secure EL2虚拟定时器设计&am…...
从零搭建数控数据采集平台:一个开源工具搞定Fanuc、三菱、广数等12种系统(跨平台部署指南)
开源数控数据采集平台实战:12种系统兼容与跨平台部署全解析 走进任何一家现代化机加工车间,你会听到此起彼伏的机床运转声,看到闪烁的数控系统操作面板。这些设备可能来自Fanuc、三菱、马扎克等不同厂商,每台机床都像一座数据孤岛…...
前列腺 MRI-病理 3D 配准:弹性形变场 + 体素重建全流程
文章目录 前列腺 MRI-病理 3D 配准:弹性形变场 + 体素重建全流程 一、任务 二、环境 三、数据 3.1 结构 3.2 MRI 预处理 四、模型 4.1 弹性配准网络 4.2 损失函数 五、训练 六、评估 七、消融 八、调试 九、总结 代码链接与详细流程 购买即可解锁1000+YOLO优化文章,并且还有海…...
