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

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

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

下面進(jìn)行如下操作

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

而B頁面想通過 -> 前進(jìn)鍵回到 c頁面。

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

于是

我寫了如下代碼

  /** 防止從填寫表單頁面后退之后又前進(jìn)，會(huì)丟失之前所選擇的計(jì)劃價(jià)格和價(jià)格因素 */
  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('請(qǐng)點(diǎn)擊購買按鈕進(jìn)行購買')
      next(false)
    } else {
      next()
    }
  },
  method:{
	  buy(){
	   sessionStorage.setItem('preventForward', false)
	  }
  }

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

可這個(gè)時(shí)候，實(shí)際會(huì)返回到 c頁面。

原因就是c頁面雖然被我們阻止了，卻進(jìn)入了歷史棧中, 我想了個(gè)方法來防止這個(gè)被禁止的請(qǐng)求加入到棧中。

也就是在 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('請(qǐng)點(diǎn)擊購買按鈕進(jìn)行購買')
    //這里把next（false）也去掉。兼容移動(dòng)端。否則在微信操作時(shí)，會(huì)重復(fù)提醒上面那句話
  //  next(false)
  } else {
    next()
  }
},
method:{
    buy(){
     sessionStorage.setItem('preventForward', false)
    }
}