vue 移动端路由跳转时的滚动问题

问题原因：

在滑动页面后，跳转到另一个页面，在回到活动过的那个页面，浏览器已经记录了当前的垂直滚动距离，这是由于浏览器在导航跳转和通过 History API 创建历史记录时，都会记录当前的垂直滚动距离。

解决方法：

一、采用官方推荐方法（滚动行为）

  本人是采用了官方推荐的方法解决了项目中的问题，以下是具体代码：

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}

使用该方法的原因：

1. 据网上其他博客的说法，下列代码也可以解决滚动问题：

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

但是笔者使用后并没有解决。

由于页面级别的跳转，数据需要请求加载但是响应有延迟的情况下，页面如果直接滚动，会出现滚动后，页面数据请求回来，滚动失效的情况。因此没办法采用这个该方法。

因此，如果你的页面在跳转后会有复杂的用例以及数据请求，可以在返回后，再进行有一定延迟再滚动。

二、在main.js文件中使用滚动方法

router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0)  
  setTimeout(()=>{
    next()
  },100)
})

可能与网上其他的答案有些不同，原因是我在这里加上了延时， 能够在滑动后，跳转回来依然能够回到顶部

参考文献：

1. 异步滚动

2. Vue scrollBehavior 滚动行为，实现后退页面显示在上次浏览的位置

3. js取消浏览器对页面滚动条位置的记录

4. 解决vue单页路由跳转后scrollTop的问题

5. vue路由跳转时定位到页面顶部的方法