背景
用户在浏览商品列表的时候需要回到上次浏览的位置
我们以首页，商品列表页，商品详情页为例。Index,List,Detail
首页去列表页刷新数据，详情页去列表页缓存数据。Index>List刷新，Detail>List缓存
那么就开始吧
案例和源码
github
router设置name 和 keepAlive
设置router添加name值和meta.keepAlive值。根据需求Index和List需要缓存设置meta.keepAlive为true，Detail为false。这里我们需要注意的是，我们除了需要在router添加name和keepAlive外，还要在对应的页面设置相同的name值，下文会有页面name设置
App.vue使用keep-alive
vue 版本大于 2.1.0时候可以使用 include 和 exclude。这里需要注意的是，一定要在页面添加name属性。我们后面需要根据router去动态设置arr数组，所以我们这里需要在router里也设置name并且与页面保持一致，比如
views/keepalive/index.vue
router.js
app.vue除了设置keep-alive外，还需要做的一个操作是watch $route，是动态设置是否缓存的关键，我们动态设置List页面keepAlive属性的时候，监听到router变化后，设置keep-alive的arr数组。
你需要把需要缓存的页面放进arr数组中，比如我的项目里需要缓存src/views/keepalive文件夹下的Index和List。
当监听到当页面不需要缓存的时候，就会从arr把它删除从而动态设置页面是否缓存。注意，需要在data的arr和，watch 的里to switch case 都添加缓存的页面name值
list动态设置keepAlive
上文一直在说List页面动态设置keepAlive，那么究竟是怎么实现的呢。其实在页面的beforeRouteLeave操作的。list->detail的时候，list页面的keepAlive是true，list去其他页面的时候的keepAlive则为是false。从而可以在App.js里监听到List keepAlive动态变化。实现首页去列表页刷新数据，详情页去列表页缓存数据。
// 动态设置keepAlive beforeRouteLeave: function(to, from, next) { // 如果去Detail，当前页面需要缓存，反之当前页面不缓存 switch (to.name) { case 'Detail': from.meta.keepAlive = true break default: from.meta.keepAlive = false } next() },当我们从详情页回到列表页,设置List的keepAlive为false后，arr里就没有了List,在从Index去List就可以重新请求数据了
结束
如果您遇到了问题可以给我提 issues
获取更多技术相关文章，关注公众号”前端女塾“。
回复加群，即可加入”前端仙女群“
您也可以扫描添加下方的微信并备注 Sol 加前端交流群，交流学习。
如果对你有帮助送我一颗小星星，你的star是我前进的动力（づ￣3￣）づ╭❤～
