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 时，发现是从填写资料过来的，但后退还是会回到商品详情页。