码迷,mamicode.com
首页 > 其他好文 > 详细

vue2.0 页面A跳转到页面B,B页面停留在A页面的滚动位置的解决方法

时间:2017-12-09 16:48:36      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:lis   outer   方法   跳转   size   detail   路由   ons   func   

如果页面A沿Y轴滚动一段距离,然后跳转到页面B;

在进入B页面时,B页面已经滚到页面A的距离,返回页面A,发现A还在之前的滚动位置;

这样体验就很不好,所以我们要进行一些处理;

我的方法是:在路由守卫回调中,设置每次进入路由时,将window的scroll值设置为0;window.scroll(0, 0);代码如下

// 全局路由守卫
router.beforeEach((to, from, next) => {
  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  // A跳转到B,B页面停留在A页面的滚动位置;解决方法:将scrollTop设置为0
  window.scroll(0, 0);
  // nextRoute: 设置需要路由守卫的路由集合
  const nextRoute = [home, good-list, good-detail, cart, profile];
  let isLogin = global.isLogin;  // 是否登录
  // 未登录状态;当路由到nextRoute指定页时,跳转至login
  if (nextRoute.indexOf(to.name) >= 0) {  
    if (!isLogin) {
      console.log(what fuck);
      router.push({ name: login })
    }
  }
  // 已登录状态;当路由到login时,跳转至home 
  if (to.name === login) {
    if (isLogin) {
      router.push({ name: home });
    }
  }
  next();
});

 

就这样简单

vue2.0 页面A跳转到页面B,B页面停留在A页面的滚动位置的解决方法

标签:lis   outer   方法   跳转   size   detail   路由   ons   func   

原文地址:http://www.cnblogs.com/minigrasshopper/p/8011748.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!