vue移动端项目中如何实现页面缓存的示例代码

对于首页，一般我们都会让其一直保持缓存的状态。对于详情页，不管从哪个入口进入，都会让其重新刷新。实现思路说到页面缓存，在vue中那就不得不提keep-alive组件了，keep-alive提供了路由缓存功能，本文主要基于它和vuex来实现应用里的页面跳转缓存。vuex里维护一个数组cachePages，用以保存当前需要缓存的页面。具体实现vuex实现内容App.vue里，keep-alive的include设置cachePages路由配置路由守卫还原页面滚动条位置此时虽然页面实现缓存了，但滚动条每次都会重新回到顶部。在页面离开时，也就是deactivated触发时记录滚动条位置。这里发现使用deactivated时会因为页面隐藏过快会导致获取的节点滚动条高度为0，所以用beforeRouteLeave。如果你的缓存没有生效，请首先检查一下两个name和needCachePages里是否一致。