vue3 表单数据发生改变时,切换路由给我提示

一、需求说明

1、当表单数据未发生改变时,save和discard按钮不可点击,路由切换时无提示(如下图所示)

2、当表单数据发生改变时,save和discard按钮可点击,路由切换时出现提示(如下图所示)

二、实现方案

1、数据对比

逻辑:使用"lodash"提供的 cloneDeep 方法复制一份当前的数据,与页面加载时的originFormData数据进行比较( isEqual 方法),将比较的结果存在session中

2、路由拦截

router.beforeEach 中进行判断拦截

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【C语言_C语言语句_复习篇】

目录 一、C语言的语句有哪些 1.1 空语句 1.2 表达式语句 1.3 函数调用语句 1.4 复合语句 1.5 控制语句 二、分支语句(两种) 1.1 if语句 1.1.1 普通分支语句(if、if_else) 1.1.2 嵌套if语句 1.1.3 else嵌套if两种写法的比较 1.1.4 else悬空问题 1.1.…

西贝柳斯Sibelius2024免费专业的乐谱制作软件

西贝柳斯Sibelius是一款专业的乐谱制作软件,广泛应用于音乐教育、电影配乐、管弦乐团、合唱团等领域。以下是对Sibelius软件的详细介绍: sibelius2024版本下载如下: https://wm.makeding.com/iclk/?zoneid47077 一、功能 Sibelius具有强大…

Promise搞不懂,看这篇就明白了

Promise搞不懂,看这篇就明白了 Promise 是异步编程的一种解决方案,实质上Pomise是个对象,用来封装异步操作,可以更加优雅的书写复杂的异步任务。 具体来看他是怎么工作的: Promise语法格式 new Promise(function (re…

学习SSM的记录(八)-- SSM整合项目《任务列表案例》

前端程序搭建和运行 项目预览 接口分析 1.学习计划分页查询 需求:查询对应数据页数据 uri:schedule/{pageSize}/{currentPage} 请求方式:get 响应数据:json {"code":200,"flag":true,"data"…

基于java+springboot+vue实现的高校社团管理系统(文末源码+Lw+ppt)23-419

摘 要 系统根据现有的管理模块进行开发和扩展,采用面向对象的开发的思想和结构化的开发方法对高校社团的现状进行系统调查。采用结构化的分析设计,该方法要求结合一定的图表,在模块化的基础上进行系统的开发工作。在设计中采用“自下而上”…

【C++算法模板】字典树,超详细注释带例题讲解

文章目录 0)概述1)数据结构2)插入操作3)查询操作4)完整代码1. 字符数组2. 字符串 视频链接:F06 字典树(Trie) 0)概述 是快速插入和查询字符串的多叉树结构,根节点编号为0&#xff0…

Redis:使用redis-dump导出、导入、还原数据实例

redis的备份和还原,借助了第三方的工具,redis-dump 1、安装必要环境 yum -y install zlib-devel openssl-devel2、安装redis-dump 安装ruby: ruby下载地址:https://www.ruby-lang.org/zh_cn/downloads/ 我下载的是 2.5.0 版本…

Linux系统下基于VSCode和Cmake进行C++开发

目录 简介一、GCC编译器1.1创建cpp文件1.2编译过程1.3g重要编译参数 二、GDB调试器三、IDE-VScode3.1 VSCode常用快捷键3.2 swap测试 四、CMake4.1CMake介绍4.2 CMake语法特性介绍4.3 CMake重要指令和常用变量4.4 CMake编译流程4.5CMake代码实践 五、使用VSCode进行完整项目开发…

Gateway网关在url参数带有特殊字符的情况下转发失败(响应400)

本文主要分享了,SpringCloud Gateway网关在url参数带有空格或者特殊字符的情况下,转发失败导致响应错误码400的解决方案。 响应400错误码的2种场景: 1.参数带空格,Gateway会误认为该空格是切割符,如?phone 135****6…

B/S基于云计算的云HIS智慧医院管理系统源码带电子病历编辑器

目录 一、系统概述 二、开发环境 三、系统功能 1、门诊部分 2、住院部分 3、电子病历 4、药物管理 5、统计报表 6、综合维护 7、运营运维 云HIS系统:病案首页 云his系统源码 SaaS应用 功能易扩 统一对外接口管理 现如今,大数据、云计算、移动…

深入浅出计算机网络 day.2 概论⑥ 计算机网络体系结构

上帝疯狂杜撰世界悲情的命题 将凉薄和荒芜尽写 —— 24.3.13 内容概述 1.常见的三种计算机网络体系结构 2.计算机网路体系结构分层的必要性 3.计算机网络体系结构分层思想举例 4.计算机网络体系结构中的专用术语 一、常见的三种计算机网络体系结构 1.OSI参考模型 …

Linux第77步_处理Linux并发的相关函数

了解linux中的“原子整形数据”操作、“原子位数据”操作、自旋锁、读写锁、顺序锁、信号量和互斥体,以及相关函数。 并发就是多个“用户”同时访问同一个共享资源。如:多个线程同时要求读写同一个EEPROM芯片,这个EEPROM就是共享资源&#x…

运行vue项目时的问题

1.问题:在终端输入:npm run serve时,弹出选择应用以打开npm 2.解决方法: 在你的终端中输入:get-command npm(第一次可能没反应 再输入一次) 根据这个路径找到npm删除即可 再次运行npm run serve

谈谈你对Java平台的理解?

从你接触 Java 开发到现在,你对 Java 最直观的印象是什么呢?是它宣传的 “Write once, run anywhere”,还是目前看已经有些过于形式主义的语法呢?你对于 Java 平台到底了解到什么程度?请你先停下来总结思考一下。 今天…

VSCode提交代码

VSCode提交代码方式: 先在电脑本地文件夹中打开git的bash窗口使用git clone https://github.com/xxxx/克隆仓库地址到本地,并生成一个项目的文件夹打开VSCode,点击文件按钮,打开加载项目的文件夹对于VSCode设置Git路径&#xff…

【小黑嵌入式系统第十九课】结课总结(三)——操作系统部分(RTOSμC/OS-Ⅲ程序设计基础(任务函数时间临界区通信))

上一课: 【小黑嵌入式系统第十八课】结课总结(二)——软件部分(系统架构&调试&测试&运行&系统软件设计) 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默&#xff0…

迷你洗衣机排名前十名:2024年十大性能超强内衣洗衣机优选

随着现在的生活水平的不断提高,高科技能帮我们搞定不少问题,如果你比较注重个人卫生、追求生活品质,可以考虑选择一台专用的迷你洗衣机,我们就无须自己亲自动手去清洗内衣物,从而导致浪费时间,如果你担心孩…

Docker常见指令

1.docker search mysql :从docker镜像仓库搜索和mysql有关的镜像 docker search mysql 2.docker pull mysql :从docker仓库拉取mysql镜像 docker pull mysql 3.docker run mysql :启动mysql镜像 docker run mysql 4.docker ps &#xff…

iconfont 字体应用

1、登录 打开阿里图标 https://www.iconfont.cn/ 2、选择心仪的图标制作 iconfont 字体。 3、图标全部选择入库之后, 点右上角的购物车。 添加到项目,是方便管理图标字体的。 也可以直接下载代码的 4、下载到本地之后,把里面的 iconfont.…

altgraph的安装和用途说明

前言 altgraph 是 graphlib 的一个分支:一个图(网络)包,用于构建图、BFS 和 DFS 遍历、拓扑排序、最短路径等,带有 graphviz 输出。 安装 pip install altgraph 函数和用例 生物链 from altgraph import Graph# 定…