vue router返回到指定的路由的場景分析
項(xiàng)目場景:
項(xiàng)目場景:示例:A(商品詳情)——B(商品購買頁面)-C(支付成功頁面)——D(訂單頁面)
問題描述:
提示:這里描述項(xiàng)目中遇到的問題:
如果我們不做控制的話,安卓按照瀏覽器返回機(jī)制,依次從D-C-B-A這樣子,這樣子會有一定的bug,測試那邊也是說不過去啊,原本想利用beforeRouteLeave這個(gè)來操作進(jìn)行更改跳轉(zhuǎn),發(fā)現(xiàn)還是有點(diǎn)問題最后還是用beforeRouteEnter來操作了,先放上兩個(gè)的區(qū)別吧:
這里先介紹一下導(dǎo)航守衛(wèi) > beforeRouteEnter 離開路由之前執(zhí)行的函數(shù),可用于頁面的反向傳值,頁面跳轉(zhuǎn) > beforeRouteLeave 進(jìn)入路由之前執(zhí)行的函數(shù),寫在組件里可根據(jù)路由進(jìn)行頁面判斷或傳值
原因分析: 錯(cuò)誤寫法沒啥用,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)建新的瀏覽記錄并插入瀏覽記錄隊(duì)列中。 1.狀態(tài)對象(stateObject)--stateObject是一個(gè)JavaScript對象,通過pushState方法可以將stateObject內(nèi)容傳遞到新頁面中。 2.標(biāo)題(title)--幾乎沒有瀏覽器支持該參數(shù),但是傳一個(gè)空字符串會比較安全。 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 => { //因?yàn)楫?dāng)鉤子執(zhí)行前,組件實(shí)例還沒被創(chuàng)建 // vm 就是當(dāng)前組件的實(shí)例相當(dāng)于上面的 this,所以在 next 方法里你就可以把 vm 當(dāng) this 來用了。 console.log(vm);//當(dāng)前組件的實(shí)例 vm.replaceUrl = from.path; }); }, mounted() { // 掛載完成后,判斷瀏覽器是否支持popstate if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); /*popstate觸發(fā)時(shí)機(jī):當(dāng)前歷史條目為pushState創(chuàng)建時(shí),事件被觸發(fā)*/ window.addEventListener('popstate', this.goRouteBack, false); } }, methods: { goRouteBack(){ // 需要過濾 let routerArray = [ "/shopOnline/establishOrder", "/shopOnline/shopsuccess" ]; if (routerArray.includes(this.replaceUrl)) { //判斷,當(dāng)獲取上個(gè)頁面進(jìn)來的路由是D的時(shí)候,返回到A頁面 this.$router.replace({ path: "/shopOnline" }); } else { this.$router.replace({ path: "/my" }); //判斷,當(dāng)有其他返回值的時(shí)候,返回到默認(rèn)頁面 } } }, // 頁面銷毀時(shí),取消監(jiān)聽。否則其他vue路由頁面也會被監(jiān)聽 這個(gè)必須得寫啊!不然來回跳轉(zhuǎn)報(bào)錯(cuò) destroyed(){ window.removeEventListener('popstate', this.goRouteBack, false); }
到此這篇關(guān)于vue router返回到指定的路由的場景分析的文章就介紹到這了,更多相關(guān)vue router返回到指定的路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue 列表頁帶參數(shù)進(jìn)詳情頁的操作(router-link)
- vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實(shí)現(xiàn)
- 詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi))
- vue中使用router全局守衛(wèi)實(shí)現(xiàn)頁面攔截的示例
- vue-router 控制路由權(quán)限的實(shí)現(xiàn)
- 解決vue-router 嵌套路由沒反應(yīng)的問題
- vue-router 按需加載 component: () => import() 報(bào)錯(cuò)的解決
- Vue router安裝及使用方法解析
相關(guān)文章
Vue源碼中要const _toStr = Object.prototype.toString的原因分析
這篇文章主要介紹了Vue源碼中要const _toStr = Object.prototype.toString的原因分析,在文中給大家提到了Object.prototype.toString方法的原理,需要的朋友可以參考下2018-12-12詳解如何優(yōu)雅運(yùn)用Vue中的KeepAlive組件
在Vue中,KeepAlive組件是一種特殊的組件,用于緩存已經(jīng)渲染過的組件實(shí)例,本文主要為大家詳細(xì)介紹了KeepAlive組件的用法,需要的小伙伴可以參考下2023-09-09vue中v-model、v-bind和v-on三大指令的區(qū)別詳解
v-model和v-bind都是數(shù)據(jù)綁定的方式,下面這篇文章主要給大家介紹了關(guān)于vue中v-model、v-bind和v-on三大指令的區(qū)別,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11vue.js如何在網(wǎng)頁中實(shí)現(xiàn)一個(gè)金屬拋光質(zhì)感的按鈕
這篇文章主要給大家介紹了關(guān)于vue.js如何在網(wǎng)頁中實(shí)現(xiàn)一個(gè)金屬拋光質(zhì)感的按鈕的相關(guān)資料,文中給出了詳細(xì)的實(shí)例代碼以及圖文將實(shí)現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04Vue.config.productionTip?=?false?不起作用的問題及解決
這篇文章主要介紹了Vue.config.productionTip?=?false為什么不起作用,本文給大家分析問題原因解析及解決方案,需要的朋友可以參考下2022-11-11