vue项目中阻止浏览器左侧返回键

mounted() {
  //页面一进来的时候，就添加一个历史记录
  window.history.pushState(null, null, document.URL);
  // 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
  window.addEventListener("popstate", this.onBrowserBack, false);
},

watch: {
  // 弹框监听，当弹框显示的时候，pushState添加一个历史，供返回键使用
  PopupShow: {
    handler(newVal, oldVal) {
      if (newVal.Terms === true) {
        window.history.pushState(null, null, document.URL);
      }
    },
    deep: true
  }
},

 onBrowserBack() {
      // 比如判断需求执行back()或者go(-2)或者PopupShow=false隐藏弹框
      if (this.isEdit && this.addDialogVisible) {
          this.$confirm(‘当前有没有要编辑的内容，确定返回列表，将放弃本次操作‘, ‘提示‘, {
               confirmButtonText: ‘确定‘,
               cancelButtonText: ‘取消‘,
               type: ‘warning‘
          }).then(() => {
               if (this.isEdit && this.addDialogVisible) {
                   this.addDialogVisible = false
               }
               this.$router.go(-1)
           }).catch(() => {
               window.history.pushState(null, null, document.URL);
               console.log(‘1‘)
           });
       } else if (this.addDialogVisible2) {
           this.$confirm(‘当前有没有要编辑的内容，确定返回列表，将放弃本次操作‘, ‘提示‘, {
               confirmButtonText: ‘确定‘,
               cancelButtonText: ‘取消‘,
               type: ‘warning‘
           }).then(() => {
               if (this.addDialogVisible2) {
                   this.$refs.contrast.delmodifysiteFns()
                   this.addDialogVisible = false
               }
               this.$router.go(-1)
           }).catch(() => {
               window.history.pushState(null, null, document.URL);
           });
       } else {
           this.$router.go(-1)
       }
   }

destroyed() {
  // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
  window.removeEventListener("popstate", this.onBrowserBack, false);
}