【vue】控制回退事件,如C页面->A页面
2019-07-03 本文已影响0人
北极星丶超帅的
之前一直没遇到需要从A页面回退到C页面,一开始想用方法控制手机的物理返回键,但是中途遇到一些问题,后来就先没做这个功能,后来看到别人的实现方法,最终实现了C页面->A页面,参考:vuejs路由回退到指定页面
先了解跳转路由的两种方法的区别
router.push();
// 会记录跳转的路由,并存在 history 栈里(具有length属性),适合不同页面的切换;
router.replace();
// 不会记录路由,回退的话,是回退不到上一个页面,适合单页面的切换;
再了解history.go(i)和history.back(i)区别
history.go(i) //去指定页面
history.back(i) //去指定页面并刷新
/* 补充下:*/
location.reload()//刷新
history.forward() //前进
let len = history.length;
history.go(-(len-1)); //直接退出关闭webview
事例用法
//router.js
//一开始:商户详情页面->订台页面->订单状态页面
//要回退:订单状态页面->商户详情页面
{
path: '/订台',
name: '订台',
component: xxx
// 路由切换时触发
beforeEnter: (to, from, next) => {
if (from.path === '/订单状态') {
//当从订单状态页面离开到订台页面的时候,回退两个页面到商户详情页面
history.back(-2)
} else {
next()
}
}
},
至此已经解决了这磨人的bug,因为我的项目这种的控制不太多,所以直接放在router中,如果较多的话就可以使用混入,推荐文章Vue--手把手教你撸一个 beforeEnter 钩子函数,等日后用上混入再附上自己的封装