項目場景：

項目場景：示例:A(商品詳情)——B(商品購買頁面)-C(支付成功頁面)——D(訂單頁面）

問題描述：

提示：這里描述項目中遇到的問題：如果我們不做控制的話，安卓按照瀏覽器返回機制，依次從D-C-B-A這樣子,這樣子會有一定的bug,測試那邊也是說不過去啊，原本想利用beforeRouteLeave這個來操作進行更改跳轉，發(fā)現還是有點問題最后還是用beforeRouteEnter來操作了，先放上兩個的區(qū)別吧：

這里先介紹一下導航守衛(wèi)> beforeRouteEnter 離開路由之前執(zhí)行的函數,可用于頁面的反向傳值，頁面跳轉> beforeRouteLeave進入路由之前執(zhí)行的函數,寫在組件里可根據路由進行頁面判斷或傳值

原因分析： 錯誤寫法沒啥用，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內容傳遞到新頁面中。2.標題（title）--幾乎沒有瀏覽器支持該參數，但是傳一個空字符串會比較安全。3.地址（url）--新的歷史記錄條目的地址（可選，不指定的話則為文檔當前URL）；瀏覽器在調用pushState()方法后不會加載該地址；傳入的URL與當前URL應該是同源的，否則，pushState()會拋出異常

解決方案：

不廢話 我還是直接先貼代碼吧

data(){return { replaceUrl:'' // 記錄你一開始進入的頁面}},// this還不能直接取到beforeRouteEnter(to, from, next) { next(vm => { //因為當鉤子執(zhí)行前，組件實例還沒被創(chuàng)建 // vm 就是當前組件的實例相當于上面的 this，所以在 next 方法里你就可以把 vm 當 this 來用了。 console.log(vm);//當前組件的實例 vm.replaceUrl = from.path; }); }, mounted() { // 掛載完成后，判斷瀏覽器是否支持popstate if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); /*popstate觸發(fā)時機：當前歷史條目為pushState創(chuàng)建時，事件被觸發(fā)*/ window.addEventListener(’popstate’, this.goRouteBack, false); } }, methods: { goRouteBack(){ // 需要過濾 let routerArray = [ '/shopOnline/establishOrder', '/shopOnline/shopsuccess' ]; if (routerArray.includes(this.replaceUrl)) { //判斷，當獲取上個頁面進來的路由是D的時候，返回到A頁面 this.$router.replace({ path: '/shopOnline' }); } else { this.$router.replace({ path: '/my' }); //判斷，當有其他返回值的時候，返回到默認頁面 }}},// 頁面銷毀時，取消監(jiān)聽。否則其他vue路由頁面也會被監(jiān)聽 這個必須得寫啊！不然來回跳轉報錯 destroyed(){ window.removeEventListener(’popstate’, this.goRouteBack, false); }

到此這篇關于vue router返回到指定的路由的場景分析的文章就介紹到這了,更多相關vue router返回到指定的路由內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網！