vue的keep-alive组件清除缓存

需求：A页面 -> B页面 -> C页面，当C页面返回到B页面时，保存B页面的数据；但A页面到B页面时，B页面需要重新加载数据。

网上的方法试了很多种，下面这个有效果：

1、路由router中设置keepAlive:

{
  name: 'personnelList',
  path: '/personnelList/',
  menuCode: '001',
  component: 'personnelList',
  meta: {
    keepAlive: true
  }
},

2、修改App.vue中的router-view：

<template>
  <h-page id="app">
    <keep-alive >
      <router-view :key="$route.name" v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view :key="$route.name" v-if="!$route.meta.keepAlive"></router-view>
  </h-page>
</template>

3、在B页面添加钩子函数beforeRouteLeave，重点是离开页面的时候要清除缓存：

beforeRouteLeave(to, from, next) {
  if (to.path == "/personnelDetail") {
    from.meta.keepAlive = true;
  } else {
    let vnode = this.$vnode
    let parentVnode = vnode && vnode.parent;
  if (parentVnode && parentVnode.componentInstance && parentVnode.componentInstance.cache) {
    var key = vnode.key == null
      ? vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? `::${vnode.componentOptions.tag}` : '')
      : vnode.key;
    var cache = parentVnode.componentInstance.cache;
    var keys  = parentVnode.componentInstance.keys;
    if (cache[key]) {
      this.$destroy()
      // remove key
      if (keys.length) {
        var index = keys.indexOf(key)
        if (index > -1) {
            keys.splice(index, 1)
        }
      }
      cache[key] = null
    }
  }
  }
  next();
}

说明： /personnelDetail 对应的C页面的路由，其它不用改。

补充：

上面是针对A页面 -> B页面 -> C页面，然后C页面->B页面->A页面这种固定路由导航的情况，如果有这种需求：在C页面可以直接跳转到A页面或其它页面怎样处理?

在C页面加上如下钩子函数：

data () {
  return {
    fromVNode: null
  }
},
beforeRouteEnter(to, from, next) {
  next(vm => {
    vm.fromVNode = from
  })
},
beforeRouteLeave(to, from, next) {
  if (to.path !== '/personnelList') {
    this.fromVNode.meta.keepAlive = false
  }
  next()
}

说明： /personnelList 对应的B页面的路由，其它不用改。