VUE leaving the page routing interception

Business scene

• After the page content is edited, the user to jump to other routes, we need to prompt the user: there are changes to the current page, then jump left to confirm, to prevent loss of data editing.

  Code

beforeRouteLeave (to, from, next) {
     this.targetName = to.name  // 提示框点击确认后跳转的 路由
   if (this.checkEdit()) { // 是否对页面进行了编辑
      this.dialogVisible = true    // 打开离开页面的提示框
      next(false)
    } else {
      this.dialogVisible = false
      next()
    }
}

• VUE provides a hook function beforeRouteLeave, the function will first trigger to leave the current route, of course beforeRouteEnter, to trigger the function before entering the route.

• to: destination routing information related objects
• from: information about the current route of the object

• next: the implementation of a function of the jump. Incoming false, do not jump.

  Detecting whether the edit page

  My idea is that when the page initialization, set a target to save the old value. For example, in the edit page when editing data initialization:

  data () {
        return: {
            formData: {},
            oldData: {}
      }
  },
  mounted () {
        init() {
            axios.get(‘/example).then(res => {   // 这里就简写了
                Object.assign(this.oldData, res.data) //这里对已有的编辑数据进行保存
            this.formData = res.data     // 这里正常回显
         })
      }
  }

To preserve the original state when the user edit page after storage. Then check when leaving the page:

  checkEdit () {
        for (let key in this.oldValObj) {
        if (this.oldValObj[key] != this.formData[key]) {
          return true
        }
      }
      return false
  }

---

---

So far, the editorial changes in the general case that is complete.
But if you get the form data is data within an object also contains objects,
Object.assign()there will be wrong, and it supports only a shallow copy. At this point we need to use that 深复制method, the following:

    deepClone (obj) {
   let objClone = Array.isArray(obj) ? [] : {};
   if(obj && typeof obj === ‘object’){
    for(let key in obj){
      // 判断是不是自有属性，而不是继承属性
      if(obj.hasOwnProperty(key)){
        //判断ojb子元素是否为对象或数组，如果是，递归复制
        if(obj[key]&&typeof obj[key] === ‘object’){
          objClone[key] = this.deepClone(obj[key]);
        }else{
          //如果不是，简单复制
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
 }

In this case, checkEditwe need to be adjusted.

/*   @param x {Object} 对象1 
 *   @param y {Object} 对象2 
 *   @return {Boolean} true 为相等，false 为不等 
 */
checkEdit(x, y) { // 指向同一内存时 
  if (x === y) {
    return true;
  } else if ((typeof x == "object" && x != null) && (typeof y == "object" && y != null)) {
    if (Object.keys(x).length != Object.keys(y).length) {
      return false;
    }
    for (var prop in x) {
      if (y.hasOwnProperty(prop)) {
        if (!deepEqual(x[prop], y[prop])) {
          return false;
        }
      }
      else {
        return false;
      }
    }
    return true;
  } else {
    return false;
  }
}

to sum up:

For the general form of the problem can be determined in the case of the data object does not contain an object, data is relatively simple, easy to use the first version will be easy to debug. More complex data type of situation, you should consider copying deep, deep contrast to the idea.