在使用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)