vue router返回到指定的路由的場景分析
項目場景:
項目場景:示例:A(商品詳情)——B(商品購買頁面)-C(支付成功頁面)——D(訂單頁面)
問題描述:
提示:這里描述項目中遇到的問題:
如果我們不做控制的話,安卓按照瀏覽器返回機制,依次從D-C-B-A這樣子,這樣子會有一定的bug,測試那邊也是說不過去啊,原本想利用beforeRouteLeave這個來操作進(jìn)行更改跳轉(zhuǎn),發(fā)現(xiàn)還是有點問題最后還是用beforeRouteEnter來操作了,先放上兩個的區(qū)別吧:
這里先介紹一下導(dǎo)航守衛(wèi) > beforeRouteEnter 離開路由之前執(zhí)行的函數(shù),可用于頁面的反向傳值,頁面跳轉(zhuǎn) > beforeRouteLeave 進(jìn)入路由之前執(zhí)行的函數(shù),寫在組件里可根據(jù)路由進(jìn)行頁面判斷或傳值

原因分析: 錯誤寫法沒啥用,repalce就跟沒有用一樣, ```javascript beforeRouteLeave(to, from, next) { if (to.path == "/shopOnline/shopsuccess") { this.$router.replace({ name: "shopOnline" }); next(false); } else { next(); } }, ```
history.pushState(stateObject, title, url); history.pushState()主要是在不刷新瀏覽器的情況下,創(chuàng)建新的瀏覽記錄并插入瀏覽記錄隊列中。 1.狀態(tài)對象(stateObject)--stateObject是一個JavaScript對象,通過pushState方法可以將stateObject內(nèi)容傳遞到新頁面中。 2.標(biāo)題(title)--幾乎沒有瀏覽器支持該參數(shù),但是傳一個空字符串會比較安全。 3.地址(url)--新的歷史記錄條目的地址(可選,不指定的話則為文檔當(dāng)前URL);瀏覽器在調(diào)用pushState()方法后不會加載該地址;傳入的URL與當(dāng)前URL應(yīng)該是同源的,否則,pushState()會拋出異常
解決方案:
不廢話 我還是直接先貼代碼吧
data(){
return {
replaceUrl:"" // 記錄你一開始進(jìn)入的頁面
}
},
// this還不能直接取到
beforeRouteEnter(to, from, next) {
next(vm => {
//因為當(dāng)鉤子執(zhí)行前,組件實例還沒被創(chuàng)建
// vm 就是當(dāng)前組件的實例相當(dāng)于上面的 this,所以在 next 方法里你就可以把 vm 當(dāng) this 來用了。
console.log(vm);//當(dāng)前組件的實例
vm.replaceUrl = from.path;
});
},
mounted() {
// 掛載完成后,判斷瀏覽器是否支持popstate
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
/*popstate觸發(fā)時機:當(dāng)前歷史條目為pushState創(chuàng)建時,事件被觸發(fā)*/
window.addEventListener('popstate', this.goRouteBack, false);
}
},
methods: {
goRouteBack(){
// 需要過濾
let routerArray = [
"/shopOnline/establishOrder",
"/shopOnline/shopsuccess"
];
if (routerArray.includes(this.replaceUrl)) {
//判斷,當(dāng)獲取上個頁面進(jìn)來的路由是D的時候,返回到A頁面
this.$router.replace({ path: "/shopOnline" });
} else {
this.$router.replace({ path: "/my" });
//判斷,當(dāng)有其他返回值的時候,返回到默認(rèn)頁面
}
}
},
// 頁面銷毀時,取消監(jiān)聽。否則其他vue路由頁面也會被監(jiān)聽 這個必須得寫??!不然來回跳轉(zhuǎn)報錯
destroyed(){
window.removeEventListener('popstate', this.goRouteBack, false);
}
到此這篇關(guān)于vue router返回到指定的路由的場景分析的文章就介紹到這了,更多相關(guān)vue router返回到指定的路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決vue3項目打包發(fā)布到服務(wù)器后訪問頁面顯示空白問題
這篇文章主要介紹了解決vue3項目打包發(fā)布到服務(wù)器后訪問頁面顯示空白問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03
vue v-for循環(huán)重復(fù)數(shù)據(jù)無法添加問題解決方法【加track-by=''索引''】
這篇文章主要介紹了vue v-for循環(huán)重復(fù)數(shù)據(jù)無法添加問題解決方法,結(jié)合實例形式分析了vue.js通過在v-for循環(huán)中添加track-by='索引'解決重復(fù)數(shù)據(jù)無法添加問題相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vue模板配置與webstorm代碼格式規(guī)范設(shè)置
這篇文章主要介紹了vue模板配置與webstorm代碼格式規(guī)范設(shè)置詳細(xì)的相關(guān)資料,需要的朋友可以參考一下文章得具體內(nèi)容,希望對你有所幫助2021-10-10
vue3.0基于views批量實現(xiàn)動態(tài)路由的方法(示例代碼)
以前vue項目中也有很多實現(xiàn)動態(tài)路由的方法,比如有一些項目涉及權(quán)限的可能會使用api請求路由數(shù)據(jù)在來createRouter,或者本地構(gòu)建使用routes.push來動態(tài)構(gòu)建路由, 今天介紹一種新的方式來基于某個文件夾批量構(gòu)建動態(tài)路由的方法,感興趣的朋友一起看看吧2024-12-12

