vue Js 阻止浏览器回退

方法一：

推荐

主要适用于有弹窗或者遮罩的情况下，例如使用dialog，（v-model=“dialog”）当dialog = true 时，弹窗打开。

    watch: {
    //监测变化
      dialog(val) {
        if (this.dialog == true) {
        //添加一个历史记录
          history.pushState(null, null, window.location.href);
        } 
      }
    },
    mounted() {
      //添加一个历史记录
      history.pushState(null, null, window.location.href);
      // 给window添加一个popstate事件，拦截返回键，执行this.exit_dialog事件，addEventListener需要指向一个方法
      window.addEventListener('popstate', this.exit_dialog);
    },
    methods: {
      exit_dialog() {
      //关闭弹窗
        this.dialog = false;
      }
    }，
    destroyed() {
      //销毁该事件，重要！
      window.removeEventListener("popstate", this.exit_dialog);
    },

方法二：

该方法阻止后退的所有动作，不推荐。

    mounted() {
    //阻止后退的所有动作，包括 键盘、鼠标手势等产生的后退动作。
      history.pushState(null, null, window.location.href);
        window.addEventListener('popstate', function () {
            history.pushState(null, null, window.location.href);
        });
    },