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

一、需求说明

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

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

二、实现方案

1、数据对比

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

2、路由拦截

router.beforeEach 中进行判断拦截

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UEG/F-1H1D抗干扰中间继电器 额定电压DC220V 导轨安装 JOSEF约瑟

系列型号 UEG/F-2H2D抗干扰中间继电器;UEG/F-1H1D抗干扰中间继电器; UEG/F-10H-L抗干扰中间继电器;UEG/F-10H-L2抗干扰中间继电器; UEG/F-10HS抗干扰中间继电器;UEG/F-2DPDT抗干扰中间继电器; UEG/F-4DPDT抗干扰中间继电器;UEG/F-8DPDT抗干扰中间继电器; UEG/F-2H抗干扰中间继…

【CSS面试题】外边距折叠的原因和解决

参考文章 什么时候出现外边距塌陷 外边距塌陷,也叫外边距折叠,在普通文档流中,在垂直方向上的2个或多个相邻的块级元素(父子或者兄弟)外边距合并成一个外边距的现象,不过只有上下外边距才会有塌陷&#x…

都2024年了还不会vue3?从0到1 用vite搭建vue3项目,开箱即用

Vue.js(通常简称为Vue)是一个开源的JavaScript框架,用于构建用户界面和单页应用程序(SPA)。它于2014年首次发布,由Evan You创建,旨在提供一个更轻量、更易于学习的前端框架。Vue的核心库专注于视…

工业界真实的推荐系统(小红书)-排序:精排(模型、特征、融分公式、数据服务)、粗排(三塔模型)

课程特点:系统、清晰、实用,原理和落地经验兼具 b站:https://www.bilibili.com/video/BV1HZ421U77y/?spm_id_from333.337.search-card.all.click&vd_sourceb60d8ab7e659b10ea6ea743ede0c5b48 讲义:https://github.com/wangsh…

51-30 World Model | 自动驾驶的世界模型:综述

24年3月,澳门大学和夏威夷大学联合发布的工作,World Models for Autonomous Driving: An Initial Survey。花时间反复看了几遍,刚开始觉得世界模型没用,空洞无序,根本不可能部署到实车上,后面逐渐相信&…

msvcp100.dll文件丢失的多种解决手法,讲解四种比较靠谱的修复方法

在本次讨论中,我们将深入探讨电脑中出现msvcp100.dll文件丢失的各种可能原因,并且提供详尽的步骤介绍,帮助你理解并解决msvcp100.dll缺失问题的修复方案。通过这些方法,即使遇到此类问题,你也能够有效地恢复文件&#…

AI智能分析网关V4烟火识别技术在沿街商铺消防安全管理中的应用

一、背景需求 2024年3月13日,廊坊三河市燕郊镇一炸鸡店发生疑似燃气泄漏引发的爆燃事故,应急、消防、卫健等有关部门第一时间赶赴现场全力救援处置。目前现场搜救工作已经结束,事故善后处置、原因调查等工作正在进行中。本次事故也引发了社会…

【linux深入剖析】操作系统与用户之间的接口:自定义简易shell制作全过程

🍁你好,我是 RO-BERRY 📗 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 🎄感谢你的陪伴与支持 ,故事既有了开头,就要画上一个完美的句号,让我们一起加油 目录 1.shell2.自定义shell的准…

基于SpringBoot的“家乡特色推荐系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“家乡特色推荐系统”的设计与实现(源码数据库文档PPT) 开发语言:Java 数据库:MySQL 技术:SpringBoot 工具:IDEA/Ecilpse、Navicat、Maven 系统展示 系统首页界面图 用户注册界面图 文章分享界面…

DUSt3R 图生模型 代码使用流程

DUSt3R 图生模型 代码使用流程 1、创建虚拟环境 1、创建:conda create -n dust3r python3.11 cmake3.14.0 2、激活:conda activate dust3r 2、安装对应的 pytorch、CUDA conda install pytorch torchvision torchaudio pytorch-cuda12.1 -c pytorch -…

雷卯推荐基于USB 快充(USB-PD) 浪涌保护器件

USB PD 从2010年USB BC1.2 :单一5V 1.5A,到2021 年USB PD 3.1,支持电压 5V、9V、15V 和 20V,28V、36V 和 48V, 充电功率同步提升至240W。应用范围从从手机、平板电脑、笔记本电脑,逐渐向显示器、服务器、电机驱动和通信…

26-1 SQL 注入攻击 - delete注入

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、注入原理: 对于后台来说,delete操作通常是将对应的id传递到后台,然后后台会删除该id对应的数据。 如果后台没有对接收到的 id 参数进行充分的验证和过滤,恶意用户可能会…