相信大家遇到过这种情况，在列表页翻了几页后，进入某个详情，然后再返回列表页，数据回到了第一页，又要重新翻页，体验很不好，之前我采用的方案都是通过超链接的target=_bank来解决，现在有了vue，可以利用keep-alive来解决。

通过keep-alive实现页面缓存

//使用keep-alive前的布局文件
<template>
  <layout-main>
    <router-view></router-view>
  </layout-main>
</template>

//使用keep-alive后的布局文件
<template>
  <layout-main>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </layout-main>
</template>

我们需要再路由设置的时候，增加一个元信息meta.keepAlive，为列表页或其他想缓存的页面路由增加keepAlive:true

//路由举例
{
  path: '/topic/index',
  name: 'topic-index',
  component: (resolve) => require(['@/pages/course/TopicIndex'], resolve),
  meta:{
     keepAlive:true   //设置true，代表想缓存该页面
  },
},

通过这样简单的设置，就实现了页面的缓存，还是非常激动的

不过当遇到这种情况就傻眼了

列表页A -》列表页B1－》详情页－》列表页B1－》列表页A－》列表页B2

由于设置了对列表页B进行缓存，当进入列表页B2的时候，发现数据还是B1的，这肯定不行，试了很多办法，最后采用的是在钩子函数activated中，检测路由的参数id变化，如果变化了，则重新请求数据

多列表页缓存解决方案

在钩子函数mounted中，将路由参数id保存起来，页面缓存的时候id是不变的，然后在activated函数中，比对id和新的路由参数id，如果不一致，说明需要刷新数据

activated:function () {
  let id='+this.$route.query.id
  if(this.id!=id){
      //将该页面的id和新获取的id进行比对，如果不一致，说明页面应该进行数据刷新 
      //重新请求数据
      
      this.id=id   //刷新之后记得更改页面id
  }
}

其他可能的方案

我们还可能在页面中，通过路由守卫来动态设置meta.keepAlive

• beforeRouteEnter

• beforeRouteLeave

参考文档https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB

 beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    
    //根据自己的逻辑添加代码
    to.meta.keepAlive=true   //可以动态修改是否让路由缓存
    
    next()
  }

github地址：https://github.com/501351981/vue_yii_cms