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)