需求分析:

页面存在编辑框,当用户进入编辑状态时,如果没有点击保存就离开页面,需弹窗提示。如:
在这里插入图片描述

实现原理:

使用路由守卫beforeRouteLeave进行控制,当路由守卫监听到页面路由发生改变时触发弹窗。

实现代码:

	mounted() {
		......
	}

  // 使用路由守卫判断是否离开当前页面
  beforeRouteLeave(to, form, next) {
    if (this.editingRowId !== '') { // 此处为个人项目条件判断,当条件成立时才执行路由守卫
      this.$confirm('当前信息未保存,离开页面将会放弃所有修改数据,', '提示', {
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      	// 点击确定则往下执行
        next()
      }).catch(() => {
		// 取消则关闭弹窗不执行
	  })
    } else {
      // 条件不成立则继续往下执行
      next()
    }
  },

	methods: {
		......
	}
Logo

前往低代码交流专区

更多推荐