vue-router scrollBehavior无效的问题

Posted 2020-09-22 Angelov

 

 

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