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 時，發現是從填寫資料過來的，但后退還是會回到商品詳情頁。