当前位置: 首页 > 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;对其中的数值执行计算以及生成报表等…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...