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)
    }
  },
  


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章