码迷,mamicode.com
首页 > 其他好文 > 详细

vue-router scrollBehavior无效的问题

时间:2017-06-08 22:25:45      阅读:1244      评论:0      收藏:0      [点我收藏+]

标签:zh-cn   targe   log   possible   ica   from   支持   tom   ble   

 

 

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

标签:zh-cn   targe   log   possible   ica   from   支持   tom   ble   

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

(3)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!