vue-router scrollBehavior无效的问题及解决方案

　在使用vue做单页面应用开发时候使用vue-router作为路由控制器在使用过程中发现每个页面打开都在原来的位置不能返回到页面顶部位置，然后查看api文档

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

添加路由中后发现没有实际效果。。。

再细查资料发现作者在[issues](https://github.com/vuejs/vue-router/issues/675)中说了　　

Hooking into transitions involves too many intricacies and depends on custom transition implementations, so vue-router is not going to support that as a built-in. It's possible to implement your own transition component for that purpose though.

意思是vue-router不在支持这个特性了

解决方式：　　

router.beforeEach((to, from, next) => {
document.body.scrollTop = 0;
next()
});

在路由遍历中使用js代码进行滚动条的顶部返回

以上内容来源: http://www.cnblogs.com/DemoLee/p/6964959.html

然而, 实际操作中,发现document.body.scrollTop 一直未0,

查询资料. 传送门: [documentbodyscrollTop的值总为零的解决办法](https://www.cnblogs.com/starof/p/5238654.html)

解决办法如下:

router.afterEach((to, from) => {
  let bodySrcollTop = document.body.scrollTop
  if (bodySrcollTop !== 0) {
    document.body.scrollTop = 0
    return
  }
  let docSrcollTop = document.documentElement.scrollTop
  if (docSrcollTop !== 0) {
    document.documentElement.scrollTop = 0
  }
})

参考链接:

1. [Vue 2 router scrollBehavior not working for layout views](https://github.com/quasarframework/quasar/issues/161) 该issue中提到可使用[vue-scroll-behavior](https://www.npmjs.com/package/vue-scroll-behavior)(https://www.npmjs.com/package/vue-scroll-behavior)

2. [vue-router](https://github.com/vuejs/vue-router/issues/675)