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

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&#xff1a;当点击返回或者地址栏回退时&#xff0c;MessageBox无效 <template><div>Element Plus Dialog 路由离开拦截测试</div><el-button type"primary" click"$router.back()">返回</el-button>…...

上海市通过区块链技术攻关 构建数字经济可信安全技术底座

日前&#xff0c;上海市印发《上海区块链关键技术攻关专项行动方案&#xff08;2023—2025年&#xff09;》&#xff08;以下简称《行动方案》&#xff09;&#xff0c;提出到2025年&#xff0c;在区块链体系安全、密码算法等基础理论以及区块链专用处理器、智能合约、跨链、新…...

Java 面试题

昨天面试了两个Java开发程序员&#xff0c;问了一些问题&#xff0c;回答的不是很好&#xff0c;看看大家的回答如何&#xff0c;可以在评论区回复&#xff0c;测试下自己的水平。 A程序员&#xff1a; 1. 自我介绍一下&#xff1b; 2. 企业级和互联网行业都有那些项目经验,简…...

layui 表格 展开

一、表格嵌套表格&#xff08;手风琴打开&#xff09; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>设备上下线统计</title><script type"text/javascript" src"../../../l…...

[尚硅谷React笔记]——第4章 React ajax

目录&#xff1a; 脚手架配置代理_方法一 server1.js开启服务器server1:App.js解决跨域问题&#xff1a;脚手架配置代理_方法二 ​​​​​​​server2.js开启服务器server2第一步&#xff1a;创建代理配置文件编写setupProxy.js配置具体代理规则&#xff1a;App.js运行结果&a…...

Richard Stallman 正在与癌症作战

导读为了纪念 GNU 项目成立 40 周年&#xff0c;自由软件基金会&#xff08;FSF&#xff09;已计划在 10 月 1 日&#xff08;即GNU 40&#xff09;为家庭、学生以及美国的其他人群组织一场黑客马拉松活动。 活动之前&#xff0c;GNU 项目于 9 月 27 日迎来了 40 岁生日&#…...

MathType7.4最新免费版(公式编辑器)下载安装包附安装教程

MathType是一款专业的数学公式编辑器&#xff0c;理科生专用的必备工具&#xff0c;可应用于教育教学、科研机构、工程学、论文写作、期刊排版、编辑理科试卷等领域。可视化公式编辑器轻松创建数学方程式和化学公式。兼容Office Word、PowerPoint、Pages、Keynote、Numbers 等7…...

如何支持h.265视频

前言 略 h.265视频 h.265是一种视频编码格式。 随着视频编码技术的发展&#xff0c;相比H.264, H.265同等画质体积仅为一半、带宽占用省一半、画质更细腻等诸多优势。 但Web浏览器还不支持H.265的解码播放&#xff0c;因此基于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…...

【计算机网络】第一章——概述

个人主页直达&#xff1a;小白不是程序媛 系列专栏&#xff1a;计算机网络基础 目录 前言 计算机网络概述 概念 功能 组成 分类 标准化工作 性能指标 速率 带宽 吞吐量 时延 时延带宽积 往返时延RTT 利用率 分层 为什么要分层&#xff1f; 分层的基本原则&am…...

vue实现在页面拖拽放大缩小div并显示鼠标在div的坐标

1、功能要求&#xff1a; 实现在一个指定区域拖拽div,并可以放大缩小&#xff0c;同时显示鼠标在该div里的坐标&#xff0c;如图可示 缩小并拖动 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是两种非常重要的数据结构&#xff0c;两者都是特…...

父组件可以监听到子组件的生命周期吗?

在 Vue 中,父组件是可以监听到子组件的生命周期的。Vue 提供了一些特殊的钩子函数,可以在父组件中监听子组件的生命周期事件。 以下是一些常用的方法来监听子组件的生命周期: 1:使用$emit: 在子组件的生命周期钩子函数中,使用 $emit 方法触发自定义事件,向父组件发送通…...

[开源]MIT开源协议,基于Vue3.x可视化拖拽编辑,页面生成工具

一、开源项目简介 AS-Editor 基于 Vue3.x 可视化拖拽编辑&#xff0c;页面生成工具。提升前端开发效率&#xff0c;可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。 二、开源协议 使用MIT开源协议 三、界面展示 四、功能概述 基于Vue可视化拖拽编辑&#xff0c;…...

【C++ Primer Plus学习记录】数组的替代品

目录 1.模板类vector 2.模板类array&#xff08;C11&#xff09; 3.比较数组、vector对象和array对象 模板类vector和array是数组的替代品。 1.模板类vector 模板类vector类似于string类&#xff0c;也是一种动态数组。您可以在运行阶段设置vector对象的长度&#xff0c;可…...

JSP免杀马

JSP免杀马 随着Java框架的进化和程序员的内卷&#xff0c;使用PHP编写的系统越来少&#xff0c;使用Java编写的系统越来越多。JSP马的使用越来越多&#xff0c;但是就目前来看&#xff0c;各大厂商对JSP马的查杀效果还是不尽人意。这里简单通过Java的反射机制和ClassLoader技术…...

2023-10-16 node.js-调用python-记录

NodeJS 作为后端&#xff0c;仅在需要时调用 Python 在某些特殊的场景下&#xff0c;比如复杂耗时的数据处理和运算时&#xff0c;我们可以用 Python 脚本编写&#xff0c;然后使用 Node 的子进程调用 Python 脚本即可&#xff0c;这样可以提升效率。如下代码&#xff0c;我们…...

Kotlin 设置和获取协程名称

1&#xff0c;设置写成名称 创建协程作用域是或者创建协程是有个上下文参数&#xff08;context: CoroutineContext&#xff09; 创建协程作用域 CoroutineScope(Dispatchers.IO CoroutineName("协程A"))//Dispatchers.IO根据实际情况设置可有可无 源码&#xf…...

awk命令的使用

1.概念&#xff1a; awk是Linux以及UNIX环境中现有的功能最强大的数据处理工具 awk是一种处理文本数据的编程语言。awk的设计使得它非常适合于处理由行和列组成的文本数据 awk程序可以读取文本文件&#xff0c;对数据进行排序&#xff0c;对其中的数值执行计算以及生成报表等…...

地平线推出双五星合规高集成行泊一体方案;芯擎科技发布5nm车规舱驾融合芯片;魔视智能首发国产芯行泊一体域控

芯擎科技发布5nm车规舱驾融合芯片200TOPS算力支持大模型牛喀网获悉&#xff0c;芯擎科技发布5nm车规级舱驾融合芯片“龍鹰二号”&#xff0c;计划2027年第一季度启动适配。该芯片面向AI舱驾融合场景设计&#xff0c;采用柔性架构&#xff0c;可适配不同层级的中央计算平台&…...

vSAN维护模式选‘无操作’就万事大吉?详解关机重启前必须做的5项关键检查

vSAN维护模式选‘无操作’就万事大吉&#xff1f;详解关机重启前必须做的5项关键检查 在虚拟化运维领域&#xff0c;vSAN集群的关机重启操作看似简单&#xff0c;实则暗藏玄机。许多工程师习惯性地选择维护模式中的"无操作"选项&#xff0c;认为这样可以省去数据迁移…...

为什么你的GaN仿真总是不准?可能是这5个物理效应没考虑(附TCAD模型设置详解)

为什么你的GaN仿真总是不准&#xff1f;可能是这5个物理效应没考虑&#xff08;附TCAD模型设置详解&#xff09; 在功率电子领域&#xff0c;氮化镓高电子迁移率晶体管&#xff08;GaN-HEMT&#xff09;凭借其优异的性能正逐步取代传统硅基器件。然而&#xff0c;许多工程师在…...

**TiDB 在高并发场景下的性能优化实战:从慢查询到极致吞吐的跃迁之路**在当前分布式数据库广泛应用的

TiDB 在高并发场景下的性能优化实战&#xff1a;从慢查询到极致吞吐的跃迁之路 在当前分布式数据库广泛应用的背景下&#xff0c;TiDB 作为一款开源的 HTAP&#xff08;混合事务/分析处理&#xff09;数据库&#xff0c;凭借其强一致性、水平扩展能力和与 MySQL 协议的高度兼容…...

如何用WeChatMsg守护你的数字记忆:从聊天记录到个人AI数据中心的蜕变

如何用WeChatMsg守护你的数字记忆&#xff1a;从聊天记录到个人AI数据中心的蜕变 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Tre…...

Spring Boot多租户实战指南(Tenant-Aware DataSource深度剖析)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Java 多租户数据安全隔离 在云原生与 SaaS 架构普及的背景下&#xff0c;Java 应用实现多租户&#xff08;Multi-tenancy&#xff09;已成为常态。数据安全隔离是其核心挑战——必须确保租户 A 无法访…...

Navicat Premium 16.2.8 保姆级教程:5分钟搞定GaussDB主备版连接与基础配置

Navicat Premium 16.2.8 保姆级教程&#xff1a;5分钟搞定GaussDB主备版连接与基础配置 在数据库管理领域&#xff0c;Navicat Premium 一直以其直观的界面和强大的功能受到开发者和DBA的青睐。最新发布的16.2.8版本对GaussDB主备版的支持更加完善&#xff0c;让这款国产数据库…...

ARM架构CNTHVS_CTL_EL2寄存器详解与虚拟定时器应用

1. ARM架构中的CNTHVS_CTL_EL2寄存器解析在ARMv8-A架构中&#xff0c;系统寄存器扮演着处理器与操作系统间关键桥梁的角色。作为安全虚拟定时器的控制核心&#xff0c;CNTHVS_CTL_EL2寄存器在虚拟化环境中发挥着不可替代的作用。这个64位寄存器专为Secure EL2虚拟定时器设计&am…...

从零搭建数控数据采集平台:一个开源工具搞定Fanuc、三菱、广数等12种系统(跨平台部署指南)

开源数控数据采集平台实战&#xff1a;12种系统兼容与跨平台部署全解析 走进任何一家现代化机加工车间&#xff0c;你会听到此起彼伏的机床运转声&#xff0c;看到闪烁的数控系统操作面板。这些设备可能来自Fanuc、三菱、马扎克等不同厂商&#xff0c;每台机床都像一座数据孤岛…...

前列腺 MRI-病理 3D 配准:弹性形变场 + 体素重建全流程

文章目录 前列腺 MRI-病理 3D 配准:弹性形变场 + 体素重建全流程 一、任务 二、环境 三、数据 3.1 结构 3.2 MRI 预处理 四、模型 4.1 弹性配准网络 4.2 损失函数 五、训练 六、评估 七、消融 八、调试 九、总结 代码链接与详细流程 购买即可解锁1000+YOLO优化文章,并且还有海…...