zoukankan      html  css  js  c++  java
  • 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);
    }
  • 相关阅读:
    Android 解析内存泄漏
    Maven--几个需要补充的问题(三)
    android编程——百度地图初探
    poj 2752 Seek the Name, Seek the Fame(KMP需转换下思想)
    android面试题之二
    (3)选择元素——(2)文档对象模型(The Document Object Model)
    Tiny4412汇编流水灯代码,Tiny4412裸机LED操作[1]
    A9裸机
    2.1 linux中uboot移植
    芯片结构
  • 原文地址:https://www.cnblogs.com/theblogs/p/13067705.html
Copyright © 2011-2022 走看看