vueelement点击浏览器后退按钮使用confirm弹框提示路由拦截

37次阅读

共计 727 个字符,预计需要花费 2 分钟才能阅读完成。

mounted 里面

if (window.history && window.history.pushState) {history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false)
    }
    
methods 里面:goBack () {history.pushState(null, null, null)
},


 beforeRouteLeave (to, from, next) {if (this.saveLoading) {next()
      return
    }
    this.$confirm('请确认数据已保存,页面跳转后已填写的数据会被清空,是否继续跳转?', '提示', {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning'
    }).then(() => {next()
    }).catch((ms) => {next(false)
    })
  },
    

App.vue 里面

goBack () {
      // 该事件仅在浏览器后退按钮被点击时触发
      if (this.needCofirmRouter.indexOf(this.nowRouter) > -1) {history.pushState(null, null, null)
        this.toLastRoute()}
    },

    mounted () {if (window.history && window.history.pushState) {history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false)
    }
  },
  


正文完
 0