首页 > 其他 > 详细

vue-router scrollBehavior无效的问题

时间:2017-06-08 22:09:35      阅读:948      评论:0      收藏:0      [点我收藏+]

 

 

  在使用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无效的问题

原文:http://www.cnblogs.com/DemoLee/p/6964959.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!