工作生活

【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 钩子函数,等日后用上混入再附上自己的封装

上一篇下一篇

猜你喜欢

热点阅读