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

一、需求说明

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

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

二、实现方案

1、数据对比

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

2、路由拦截

router.beforeEach 中进行判断拦截

相关推荐

  1. vue3

    2024-03-15 20:52:01       46 阅读
  2. Vue 实现组件切换

    2024-03-15 20:52:01       10 阅读
  3. vue3 如何添加效验+正则表达式

    2024-03-15 20:52:01       6 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-15 20:52:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-15 20:52:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-15 20:52:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-15 20:52:01       18 阅读

热门阅读

  1. Linux磁盘管理

    2024-03-15 20:52:01       16 阅读
  2. RK3568 Ubuntu解决无法制作SD卡的问题

    2024-03-15 20:52:01       17 阅读
  3. 【vue回调函数中的 this 指向上】

    2024-03-15 20:52:01       15 阅读
  4. C++ 预编译头文件

    2024-03-15 20:52:01       21 阅读
  5. Excel百万数据如何导入导出

    2024-03-15 20:52:01       19 阅读
  6. 将PostgreSQL插件移植到openGauss指导

    2024-03-15 20:52:01       18 阅读
  7. 【TypeScript】快速掌握TypeScript的基本语法

    2024-03-15 20:52:01       19 阅读