移动端vue切换路由滚动条恢复到顶部

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29329037/article/details/83987906

问题描述：vue是单页面应用。导致路由切换之后，之前的滚动距离会一直存在，页面没有到顶部。

网上大部分的解决方案是利用路由的afterEach方法解决，如下所示，

router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
});

这样解决有如下几个问题
1.scrollTo方法部分在手机上的部分浏览器不支持，也就是不兼容。
2.用scrollTo方法会在苹果手机浏览器上会产生返回白屏问题（vue项目在IOS中多次返回会出现一半白屏挡住页面）网上有很多解决方案，我就不一 一叙述了。

最后总结下来还是利用vue-router自带的滚动行为解决 ，官方网址https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

在定义路由的new Route里添加scrollBehavior方法就可以了

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

截图如下：