Vue2开发WebApp滚动条不缓存的问题

       在用Vue2开发webapp的过程中,为了体验更加友好,使用了keep-alive来做页面缓存,当页面跳转时不刷新页面。关于keep-alive官方文档如下:


keep-alive文档

keep-alive主要是起到一种缓存页面的作用,在webapp中不用刷新,从而提高用户体验。但是再项目的实际应用中却遇到了问题。请看下图:


滚动条bug

       从上图中可以看出,页面的切换,并不会保留原先的滚动条高度。比如,当打开一个新闻客户端,在新闻列表页面,滑了很久找到了一个新闻,点进去看,看完之后再返回列表页,发现滚动条到了顶部,真是气晕。又得重新滑到底部才能接着看。

      对于上面的问题,先进行问题分析,为什么会这样呢?我大致的想法是这样,因为vue的路由切换用的是hash的方式,而hash相当于平时所用的锚点,也就是在href属性里添加"#",平时点击一个href="#"的时候,滚动条会自动跳到顶部。


解决方案:

      在这里,最简单的办法是,当页面跳转的时候,记录该页面滚动条的的高度(最后一次),当页面回来的时候再去取值。


      vue-router提供了组件内钩子函数:beforeRouteEnter和beforeRouteLeave,正如其名,vue-router提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。

     有了路由钩子函数,就可以再页面切换的时候调整滚动条。

     还需要一个存取滚动条高度值的工具,这里直接使用vuex。利用vuex的状态管理来进行滚动条存取。参照官方demo。

store.js


最后,滚动条高度得到了记录保存,上图:


推荐阅读更多精彩内容

  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 21,898评论 8 125
  • Z给我念了首他在教会杂志上看到的一段小诗, 这样写到: 我们都会老我们都会死我们终究会分离只是别在分离前变的陌生别...
    CherryC阅读 142评论 0 1
  • 粉红色的一片,却索然无味, 你说你后悔,却体验着温馨 到底你想要什么
    细微小阅读 92评论 0 0
  • 那个夏天 在那一年,那一个夏天,那一天的那一刻,我懂了离别的仿佛就在那一瞬间,那个班消失在...
    wltb阅读 57评论 0 2
  • 又是一个半年,不曾见面。 又是一个星期,没有联系。 我们更像是两个手机宠物。这话真伤人。可是事实是,现在连最...
    猫小肉阅读 89评论 0 0