vue-router next(false) 禁止訪問某個頁面時,不保留歷史訪問記錄問題
更新時間：2023年11月16日 15:23:17 作者：愛忽悠的唐唐
這篇文章主要介紹了vue-router next(false) 禁止訪問某個頁面時,不保留歷史訪問記錄問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
用戶正常訪問流程為 產(chǎn)品列表頁面【a頁面】->產(chǎn)品詳情頁面（選擇不同的計劃價格因素后點擊購買）【b頁面】->產(chǎn)品購買頁面【c頁面】
下面進行如下操作
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)
}
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue異步組件處理路由組件加載狀態(tài)的解決方案，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
vue.js+element-ui的基礎(chǔ)表單實例代碼
這篇文章主要介紹了vue.js+element-ui的基礎(chǔ)表單實例代碼,技術(shù)棧即html+vue.js+element-ui,而使用它們的方法也很簡單,引入對應(yīng)的js和css文件即可,需要的朋友可以參考下2024-03-03
vue中響應(yīng)式布局如何將字體大小改成自適應(yīng)
這篇文章主要介紹了vue中響應(yīng)式布局如何將字體大小改成自適應(yīng)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue修改數(shù)據(jù)頁面無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
windows下vue-cli導(dǎo)入bootstrap樣式
這篇文章主要介紹了windows下vue-cli導(dǎo)入bootstrap樣式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了vue實現(xiàn)在進行增刪改操作后刷新頁面，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
在現(xiàn)代前端項目開發(fā)中,主題切換已成為提升用戶體驗的核心功能之一,無論是適配用戶白天?/?夜間的使用場景、滿足企業(yè)級產(chǎn)品的品牌定制需求,還是應(yīng)對不同設(shè)備的顯示環(huán)境,靈活的主題系統(tǒng)都能讓產(chǎn)品更具競爭力,所以本文介紹了Vue實現(xiàn)項目主題切換功能的兩種方案2025-09-09
Vue2 Vue-cli中使用Typescript的配置詳解
Vue作為前端三大框架之一截至到目前在github上以收獲44,873顆星，足以說明其以悄然成為主流。下面這篇文章主要給大家介紹了關(guān)于Vue2 Vue-cli中使用Typescript的配置的相關(guān)資料，需要的朋友可以參考下。2017-07-07
凡是做SPA的項目,特別是移動端的SAP項目,首屏加載速度必定是一個繞不過去的話題,下面這篇文章主要給大家介紹了關(guān)于Vue頁面首次載入優(yōu)化的相關(guān)資料,需要的朋友可以參考下2021-12-12
這篇文章主要給大家介紹了關(guān)于分離vue文件中css、js代碼的簡單技巧,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03