vue 路由如何回退指定頁面

vue 路由如何回退指定頁面

今天做了一個 vue 項目關於路由場景的問題，路由如何回退指定頁面，在此做個記錄。

一般頁面跳轉記錄 a => b，想從 b 退回 a

this.$router.go(-1)

如果頁面跳轉記錄 a => b => c，想從 c 一步退回 a

this.$router.go(-2)

如果頁面跳轉記錄 a => b => c => b，頁面的堆棧記錄爲 a => b

b 頁面：
this.$router.replace({name:'c'}); 

跟維護隊列一樣，後進先出就行了

那如果是 a => b => c => d，變成路由隊列 a => b => e 呢？

一個簡單場景：商品列表頁 => 商品詳情頁 => 註冊賬號 => 填寫資料 => 訂單頁

在訂單頁確定後，退回到商品詳情頁纔是最好的流程。

這裏我用的是 vue-router 的 beforeEnter 實現

1.在訂單頁回到商品詳情頁

this.$router.go(-3)

2.在商品詳情頁進入到訂單頁

在後退操作後面使用 this.$router.replace 無效果，setTimeout 後使用頁面會閃現，所以改用 beforeEnter

在商品詳情頁路由判斷如何從填寫資料進來的，就進入到訂單頁，不加載商品詳情頁

name: '商品詳情頁',
path: '/xxx',
component: xxx,
beforeEnter:(to, from, next) => {
	if(from.name == '填寫資料'){
		next({ name: '訂單頁' })
	}
	next()
}

注意：雖然你可能在訂單頁打印頁面來源 from 時，發現是從填寫資料過來的，但後退還是會回到商品詳情頁。