<keep-alive>
  <component :is="view"></component>
</keep-alive>

<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- 正則表達(dá)式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<!-- 數(shù)組 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive> 

{
  path: 'list',
  name: 'itemList', // 列表頁(yè)
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '列表頁(yè)'
 }
}

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要緩存的視圖組件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要緩存的視圖組件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

export default {
  name: 'keep-alive',
  abstract: true,
  props: {
    include: [String, RegExp, Array],
    exclude: [String, RegExp, Array],
    max: [String, Number]
  },
  created () {
    this.cache = Object.create(null)
    this.keys = []
  },
  destroyed () {
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },
  mounted () {
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },
  render() {
    /* 獲取默認(rèn)插槽中的第一個(gè)組件節(jié)點(diǎn) */
    const slot = this.$slots.default
    const vnode = getFirstComponentChild(slot)
    /* 獲取該組件節(jié)點(diǎn)的componentOptions */
    const componentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
      /* 獲取該組件節(jié)點(diǎn)的名稱，優(yōu)先獲取組件的name字段，如果name不存在則獲取組件的tag */
      const name = getComponentName(componentOptions)
      const { include, exclude } = this
      /* 如果name不在inlcude中或者存在于exlude中則表示不緩存，直接返回vnode */
      if (
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }
      const { cache, keys } = this
      /* 獲取組件的key值 */
      const key = vnode.key == null
        // same constructor may get registered as different local components
        // so cid alone is not enough (#3269)
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key
     /*  拿到key值后去this.cache對(duì)象中去尋找是否有該值，如果有則表示該組件有緩存，即命中緩存 */
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        remove(keys, key)
        keys.push(key)
      }
        /* 如果沒(méi)有命中緩存，則將其設(shè)置進(jìn)緩存 */
        else {
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        /* 如果配置了max并且緩存的長(zhǎng)度超過(guò)了this.max，則從緩存中刪除第一個(gè) */
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }
      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }
}

this.cache = {
    'key1':'組件1',
    'key2':'組件2',
    // ...
}

function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  /* 判斷當(dāng)前沒(méi)有處于被渲染狀態(tài)的組件，將其銷毀*/
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy()
  }
  cache[key] = null
  remove(keys, key)
}

mounted () {
    this.$watch('include', val => {
        pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
        pruneCache(this, name => !matches(val, name))
    })
}

function pruneCache (keepAliveInstance, filter) {
  const { cache, keys, _vnode } = keepAliveInstance
  for (const key in cache) {
    const cachedNode = cache[key]
    if (cachedNode) {
      const name = getComponentName(cachedNode.componentOptions)
      if (name && !filter(name)) {
        pruneCacheEntry(cache, key, keys, _vnode)
      }
    }
  }
}

const key = vnode.key == null? 
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key

/* 如果命中緩存，則直接從緩存中拿 vnode 的組件實(shí)例 */
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    /* 調(diào)整該組件key的順序，將其從原來(lái)的地方刪掉并重新放在最后一個(gè) */
    remove(keys, key)
    keys.push(key)
} 

/* 如果沒(méi)有命中緩存，則將其設(shè)置進(jìn)緩存 */
else {
    cache[key] = vnode
    keys.push(key)
    /* 如果配置了max并且緩存的長(zhǎng)度超過(guò)了this.max，則從緩存中刪除第一個(gè) */
    if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
}

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次進(jìn)入路由執(zhí)行
        vm.getData()  // 獲取數(shù)據(jù)
    })
},

activated(){
   this.getData() // 獲取數(shù)據(jù)
},