1.在使用keepAlive缓存是发现遇到的坑，现有A-B-C三个页面（A首页，B列表页，C详情页），从A到B刷新，C退回到B不刷新，这里是使用的结合router来实现的。
2.最开始的做法在app里面

<div>
  <keep-alive>
     <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

在router路由里面设置需要缓存的组件的keepAlive:true

  {
      path: "/B",
      name: "B",
      component:B,
      meta: { title: "列表页",keepAlive:true }
    },

3.从A进入到B页面时设置B页面的meta.keepAlive==flase，让B页面刷新。

  beforeRouteLeave(to, from, next) {
    if (to.name == "B") {
       to.meta.keepAlive = false;
    }
    next();
  },

4.从C页面返回的B时设置B的meta.keepAlive==true,让B页面缓存(不刷新)

  beforeRouteLeave(to, from, next) {
    if (to.name == "B") {
       to.meta.keepAlive = true;
    }
    next();
  },

5.后面发现这样有一个问题，首次A进入B时B的keepAlive为false进入C页面时B的keepAlive为true，所以首次C退回到B时，B页面也会刷新。
导致的原因是因为当引入keep-alive 的时候它的值为true时，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。所以会导致C第一次进入B的时候会刷新。

最后解决方案

修改A页面的beforeRouteLeave替换为beforeRouteEnter当B进入A的时候修改B的keepAlive，这样的话，首次A进入B的时候keepAlive为true，执行created-> mounted-> activated，C首次退回的时候就不会刷新了。

beforeRouteEnter(to, from, next) {
    if (from.name == "B") {
      from.meta.keepAlive = false;
    }
    next();
  },