背景

用户在浏览商品列表的时候需要回到上次浏览的位置

我们以首页，商品列表页，商品详情页为例。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￣）づ╭❤～