背景
在移动端中，页面跳转之间的缓存是必备的一个需求。
例如：首页=>列表页=>详情页。
从首页进入列表页，列表页需要刷新，而从详情页返回列表页，列表页则需要保持页面缓存。
对于首页，一般我们都会让其一直保持缓存的状态。
对于详情页，不管从哪个入口进入，都会让其重新刷新。
实现思路
说到页面缓存，在vue中那就不得不提keep-alive组件了，keep-alive提供了路由缓存功能，本文主要基于它和vuex来实现应用里的页面跳转缓存。
vuex里维护一个数组cachepages，用以保存当前需要缓存的页面。
keep-alive 的 includes 设置为cachepages。
路由meta添加自定义字段 needcachepages或keepalive，needcachepages 为一个数组，表示该路由要进入的页面如果在数组内，则缓存该路由，keepalive则表示无论进入哪个页面都保持缓存，如app首页这种。
在路由守卫beforeeach里判断，如果要跳转的路由页面在当前路由的needcachepages里，则当前路由添加进cachepages里，反之删除。
具体实现
vuex实现内容
app.vue里，keep-alive的include设置cachepages
路由配置
路由守卫
还原页面滚动条位置
此时虽然页面实现缓存了，但滚动条每次都会重新回到顶部。
对于缓存的页面，会触发activated和deactivated这两个钩子，可以利用这两个钩子来实现还原滚动条位置。
在页面离开时，也就是deactivated触发时记录滚动条位置。
在重新回到页面时，也就是activated触发时还原滚动条位置。
这里发现使用deactivated时会因为页面隐藏过快会导致获取的节点滚动条高度为0，所以用beforerouteleave。
在需要缓存的页面中使用
如果页面自定义了滚动容器，此时可以传入滚动容器id
注意
我的小伙伴经常会来问我一个问题，为什么我配置了却没有缓存的效果？
这个时候你就需要注意一个问题了，keep-alive的一个关键是路由里的name要和.vue文件里的name保持一致。
如果你的缓存没有生效，请首先检查一下两个name和needcachepages里是否一致。
思考与不足
此方案是我一年多前的做法，现在想来其实还是存在一些不足的，比如每次都需要去配置路由里的needcachepages。
而实际上在移动端中，往往都是在返回上一页时，上一页始终保持缓存的状态，就如开发小程序时一样，当我们调用navigateto后再返回，页面始终是缓存的并不需要任何人为的配置。
所以现在的想法是，在vue中提供一个全局的跳转api，只要调用该api就把当前页面缓存，如果需要刷新操作，可以像小程序里的onshow一样在activated里执行你的逻辑。
到此这篇关于vue移动端项目中如何实现页面缓存的示例代码的文章就介绍到这了,更多相关vue 页面缓存内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
