vue页面位置问题

最新推荐文章于 2024-09-06 16:12:22 发布

weixin_34125592

最新推荐文章于 2024-09-06 16:12:22 发布

阅读量1.5k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cc259fbe51d456e8a12eff0

版权

问题1：在vue这种单页应用中，如果你在a页面滚动了一段距离后，此时前往b页面后，b页面也会停留在a页面的滚动位置。

解决：

routes: [    
    {      
        path: '/detail',      
        name: 'Detail',      
        component: resolve => require(['@/pages/detail'], resolve)    
    }    
],
scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {        
          return savedPosition    
    } else {      
          if (from.meta.keepAlive) {        
               from.meta.savedPosition = document.body.scrollTop;      
          }        
          return { x: 0, y: to.meta.savedPosition || 0 }    
    }  
}复制代码复制代码

scrollBehavior是路由提供的基础功能，这段函数写的是：

1.如果通过浏览器自带的前进后退按钮切换的路由，那么会自动使用浏览默认的回滚上次页面的浏览位置。

2.如果是通过vue路由进行的页面切换。例如a前往b，首先判断a是不是通过keep-alive缓存的组件，如果是，则在a路由的meta中添加一个savedPosition字段，并且值为a的滚动位置。最后return的是页面需要回滚的位置。如此一来，如果打开一个页面，该页面的组件路由中meta.savedPosition为undefined的话，则页面滚动到（0,0）的位置，这样解决了问题1。那么如果打开一个页面，它的路由的meta.savedPosition有值的话，则滚动到上次浏览的位置，因为meta.savedPosition保存的就是上次浏览的位置。

文章来源：https://juejin.im/post/5b2ce07ce51d45588a7dbf76

转载于:https://juejin.im/post/5cc259fbe51d456e8a12eff0