vue-router next(false) 禁止訪問某個頁面時,不保留歷史訪問記錄問題

更新時間：2023年11月16日 15:23:17 作者：愛忽悠的唐唐

這篇文章主要介紹了vue-router next(false) 禁止訪問某個頁面時,不保留歷史訪問記錄問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

下面進行如下操作

c頁面按 <- 返回鍵返回了b頁面，

而B頁面想通過 -> 前進鍵回到 c頁面。

這樣的操作是不被允許的。

于是

我寫了如下代碼

  /** 防止從填寫表單頁面后退之后又前進，會丟失之前所選擇的計劃價格和價格因素 */
  beforeRouteEnter (to, from, next) {
    if (from.name === 'orderInput') {
      sessionStorage.setItem('preventForward', true)
    }
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 如果是從表單填寫頁返回的并且不是通過購買按鈕去往表單填寫頁面
    if (to.name === 'orderInput' && sessionStorage.getItem('preventForward') === 'true') {
      this.showToast('請點擊購買按鈕進行購買')
      next(false)
    } else {
      next()
    }
  },
  method:{
	  buy(){
	   sessionStorage.setItem('preventForward', false)
	  }
  }

但是這個操作會有一個問題，當(dāng)我阻止了一次去往c頁面的操作next(false)之后，如果在b頁面按返回鍵，按我們預(yù)想的，應(yīng)該要返回a頁面。

可這個時候，實際會返回到 c頁面。

原因就是c頁面雖然被我們阻止了，卻進入了歷史棧中, 我想了個方法來防止這個被禁止的請求加入到棧中。

也就是在 next(false) 前面加入

this.$router.go(-1)

整體代碼

如下：

beforeRouteEnter (to, from, next) {
  if (from.name === 'orderInput') {
    sessionStorage.setItem('preventForward', true)
  }
   next()
},
beforeRouteLeave (to, from, next) {
  // 如果是從表單填寫頁返回的并且不是通過購買按鈕去往表單填寫頁面
  if (to.name === 'orderInput' && sessionStorage.getItem('preventForward') === 'true') {
    this.$router.go(-1)
    this.showToast('請點擊購買按鈕進行購買')
    //這里把next（false）也去掉。兼容移動端。否則在微信操作時，會重復(fù)提醒上面那句話
  //  next(false)
  } else {
    next()
  }
},
method:{
    buy(){
     sessionStorage.setItem('preventForward', false)
    }
}