首页 > 代码库 > vue-router scrollBehavior无效的问题

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中说了

  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代码进行滚动条的顶部返回

vue-router scrollBehavior无效的问题