vue 阻止页面跳转 , 询问是否离开页面 , 确定后离开, 禁用浏览器返回功能

项目中遇到如下需求

数据录入页面 , 用户没有保存数据的时候, 发生路由跳转, 浏览器返回时加以阻止 , 并给出提示 , 询问未保存, 是否离开页面
点击保存以后 , 可以返回 , 自动跳转 , 进入下一个页面不加限制

实现过程 : 两个方面入手 ,

浏览器返回功能 , 需要处理,
vue-router 需要处理

实现方法(两者结合)

浏览器返回处理方式

// mounted()的时候我们调用原生js , 操作一下history<br><br>history.pushState(null, null, document.URL); // 主要是在不刷新浏览器的情况下，创建新的浏览记录并插入浏览记录队列中。 这步非常重要 , 不然的话当我们点击返回按钮 , 虽然页面阻止了跳转 , 但是url地址栏却发生了变化 
    window.onpopstate = function (event) {
      // alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
      history.pushState(null, null, document.URL);<br>//使用element
      that
        .$confirm("离开页面 , bom将不做保存, 请确认已经保存", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that.deleteFile();//业务功能 , 可以忽略
          that.$router.push({ name: "跳转到页面的name", params: { status: true } });//此处手动增加了状态 , 主要为了监听路由跳转的时候判断是否进行跳转 , 看下面代码
        })
        .catch(() => {
          // alert("window")
          return false;
        });
    };

　　vue-router的处理方式

// vue路由的钩子函数 , 可以放在mouted的同级
beforeRouteLeave(to, from, next) {
    console.log(to);
    console.log(from);
    if (to.params.status) {//就是上面的状态 如果是true , 则不询问是否保存, 当然这个方法比较笨, 大家可以使用更优雅的方式
      next();
    } else {
      this.$confirm("离开页面 , bom将不做保存, 请确认已经保存", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteFile();//业务功能请忽略
          next();
        })
        .catch(() => {
          // alert("router")
        });
    }
  },