在使用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中说了
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代码进行滚动条的顶部返回