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 时,发现是从填写资料过来的,但后退还是会回到商品详情页。
前端菜鸟一枚,如有错误之处,烦请指出,与大家共同进步!