專案場景：

專案場景：示例: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,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',false);
 }

到此這篇關於vue router返回到指定的路由的場景分析的文章就介紹到這了,更多相關vue router返回到指定的路由內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！