在用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
最后，滚动条高度得到了记录保存，上图：
网友评论