項目場景：

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

問題描述：

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

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

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

解決方案：

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

data(){return { replaceUrl:'' // 記錄你一開始進入的頁面}},// this還不能直接取到beforeRouteEnter(to, from, next) { next(vm => { //因為當鉤子執行前，組件實例還沒被創建 // 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觸發時機：當前歷史條目為pushState創建時，事件被觸發*/ 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' }); //判斷，當有其他返回值的時候，返回到默認頁面 }}},// 頁面銷毀時，取消監聽。否則其他vue路由頁面也會被監聽 這個必須得寫啊！不然來回跳轉報錯 destroyed(){ window.removeEventListener(’popstate’, this.goRouteBack, false); }

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