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);
    }
  • 相关阅读:
    微信小程序上传文件(报错处理方式)
    自绘 TreeDataView 控件
    C# 读取outlook 本地签名
    【英雄帖】FreeRedis 邀请您一起优化项目。
    (30)ASP.NET Core3.1 集成Apollo快速安装与使用
    C#引用fo-dicom读取dicom文件异常
    .NET 开源导入导出库 Magicodes.IE 2.5发布
    WinUI 3 Preview 3 发布了,再一次试试它的性能
    Aspose.Word for DotNet 定位到每页,画笔 移动到某页。
    .NET Core下好用的FTP框架 FluentFTP
  • 原文地址:https://www.cnblogs.com/theblogs/p/13067705.html
Copyright © 2011-2022 走看看