vue实现页面数据未保存时离开页面做弹窗提示

需求分析：

页面存在编辑框，当用户进入编辑状态时，如果没有点击保存就离开页面，需弹窗提示。如：

实现原理：

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

实现代码：

	mounted() {
		......
	}

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

	methods: {
		......
	}