vue+element，点击浏览器后退按钮使用$confirm弹框提示，路由拦截

2024年3月8日 342次阅读 来源: 弱鸡的前端程序员

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)
    }
  },
    原文作者：弱鸡的前端程序员
    原文地址: https://segmentfault.com/a/1190000019718645
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞