vue 退出编辑页的保存提示,同时解决beforeRouteLeave 和 浏览器的前进后退的闪现冲突（hash模式有此问题，history模式下正常）

export default {
  data() {
    return {
      dataIsChange: 0, // 计数器，据此判断表单是否已编辑
      noLeaveprompt: false, // 表单提交后，设置为true，据此判断提交不再弹出离开提示
      form: { // 表单数据
        menuname: '', // 菜单名称
        cmark: '', // 描述
        imagename: '', // 菜单图标
        menuurl: '', // 菜单路径path
        type: '' // 菜案模块
      }
    }
  },
  methods: {
    // 保存
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addMenu(this.form).then(()=> {
            this.$message.success('新增菜单成功！')
            this.noLeaveprompt = true // 设置为true
            this.$router.push({ path: '/systemManage/menuManage/list' })
          })
        }
      })
    }
  },
  watch: {
    // 监听表单数据变化
    form: {
      handler(val) {
        if (val) {
          this.dataIsChange++
        }
      },
      deep: true // 深层次监听
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.dataIsChange && !this.noLeaveprompt) { // 判断表单数据是否变化，以及提交后不进行此保存提示
      setTimeout(() => { // hash模式下，此处必须要加延迟执行，主要解决浏览器前进后退带来的闪现
        this.$confirm('您的数据尚未保存，是否离开？', '离开页面', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          next()
        }).catch(() => {
          next(false)
        })
      }, 200)
    } else {
      next()
    }
  }
}

最后

以上就是震动红酒为你收集整理的vue 退出编辑页的保存提示,同时解决beforeRouteLeave 和 浏览器的前进后退的闪现冲突（hash模式有此问题，history模式下正常）的全部内容，希望文章能够帮你解决vue 退出编辑页的保存提示,同时解决beforeRouteLeave 和 浏览器的前进后退的闪现冲突（hash模式有此问题，history模式下正常）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。