Vue 单页面页面跳转滚动条记忆问题

问题描述：

        单页面中页面跳转后，二级页面滚动条位置会跟上级页面一致。如首页列表页，进入详情如果详情内容可滚动，滚动条会同首页位置一致。原因vue路由跳转是通过对history.pushState()和history.replaceState()方法模拟来实现的，当调用router.go()或者 router.back()方法的时候就和history.hgo()、history.back()效果一样。但是，不加处理的情况下，组件的滚动行为会跟我们想象的不同

解决方案：

        网上给出了很多解决方案，大多数是页面切换控制scroll位置。但是此处推荐vue官方给出的方案 scrollBehavior 方法，下边给出官方示例

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return { x: 0, y: 0 }
  }
})

更多深入使用方法和场景在此不多赘述。