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

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞