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

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

含蓄的大海 · 北京地铁13号线扩能提升工程 ...· 7 月前 ·

逆袭的苹果 · 在我死后，我的猫会吃掉我的眼珠子吗？|骨灰| ...· 1 年前 ·

飞奔的绿茶 · 淘宝优惠券,天猫购物券领取_超值优惠活动折扣 ...· 2 年前 ·

淡定的炒饭 · 《名侦探柯南：绯色的子弹》今日上映 ...· 2 年前 ·

含蓄的酸菜鱼 · 电影《温蒂妮》：错过，爱过，再错过· 2 年前 ·

// 页面一进来的时候，就添加一个历史记录 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);