// feb-alive/src/components/feb-alive.js
render () {
  // 取到router-view的vnode
  const vnode = this.$slots.default ? this.$slots.default[0] : null
  const disableCache = this.$route.meta.disableCache
  // 如果不支持html5 history則不做緩存處理
  if (!supportHistoryState) {
    return vnode
  }
  // 嘗試寫(xiě)入key
  if (!history.state || !history.state[keyName]) {
    const state = {
      [keyName]: genKey()
    }
    const path = getLocation()
    history.replaceState(state, null, path)
  }
  // 有些瀏覽器不支持往state中寫(xiě)入數(shù)據(jù)
  if (!history.state) {
    return vnode
  }
  // 指定不使用緩存
  if (disableCache) {
    return vnode
  }
  // 核心邏輯
  if (vnode) {
    const { cache, keys } = this
    const key = history.state[keyName]
    const { from, to } = this.$router.febRecord
    let parent = this.$parent
    let depth = 0
    let cacheVnode = Object.create(null)
    vnode && (vnode.data.febAlive = true)
    while (parent && parent._routerRoot !== parent) {
      if (parent.$vnode && parent.$vnode.data.febAlive) {
        depth++
      }
      parent = parent.$parent
    }

    // 記錄緩存及其所在層級(jí)
    febCache[depth] = cache

    // /home/a backTo /other
    // 內(nèi)層feb-alive實(shí)例會(huì)被保存，防止從/home/a 跳轉(zhuǎn)到 /other的時(shí)候內(nèi)層feb-alive執(zhí)行render時(shí)候，多生成一個(gè)實(shí)例
    if (to.matched.length < depth + 1) {
      return null
    }
    if (from.matched[depth] === to.matched[depth] && (from.matched.slice(-1)[0] !== to.matched.slice(-1)[0])) {
      // 嵌套路由跳轉(zhuǎn) && 父級(jí)路由
      // /home/a --> /home/b
      // 父路由通過(guò)key進(jìn)行復(fù)用
      cache[key] = cache[key] || this.keys[this.keys.length - 1]
      cacheVnode = getCacheVnode(cache, cache[key])
      if (cacheVnode) {
        vnode.key = cacheVnode.key
        remove(keys, key)
        keys.push(key)
      } else {
        this.cacheClear()
        cache[key] = vnode
        keys.push(key)
      }
    } else {
      // 嵌套路由跳轉(zhuǎn) && 子路由
      // 正常跳轉(zhuǎn) && 動(dòng)態(tài)路由跳轉(zhuǎn)
      // /a --> /b
      // /page/1 --> /page/2
      vnode.key = `__febAlive-${key}-${vnode.tag}`
      cacheVnode = getCacheVnode(cache, key)
      // 只有相同的vnode才允許復(fù)用組件實(shí)例，否則雖然實(shí)例復(fù)用了，但是在patch的最后階段，會(huì)將復(fù)用的dom刪除
      if (cacheVnode && vnode.tag === cacheVnode.tag) {
        // 從普通路由后退到嵌套路由時(shí)，才需要復(fù)原key
        vnode.key = cacheVnode.key
        vnode.componentInstance = cacheVnode.componentInstance
        remove(keys, key)
        keys.push(key)
      } else {
        this.cacheClear()
        cache[key] = vnode
        keys.push(key)
      }
    }
    vnode.data.keepAlive = true
  }
  return vnode
}

const vnode = this.$slots.default ? this.$slots.default[0] : null
const disableCache = this.$route.meta.disableCache

// 如果不支持html5 history 寫(xiě)操作則不做緩存處理
if (!supportHistoryState) {
  return vnode
}
// 嘗試寫(xiě)入key
if (!history.state || !history.state[keyName]) {
  const state = {
    [keyName]: genKey()
  }
  const path = getLocation()
  history.replaceState(state, null, path)
}
// 有些瀏覽器不支持往state中寫(xiě)入數(shù)據(jù)
if (!history.state) {
  return vnode
}
// 指定不使用緩存
if (disableCache) {
  return vnode
}

// 核心邏輯
if (vnode) {
  const { cache, keys } = this
  const key = history.state[keyName]
  const { from, to } = this.$router.febRecord
  let parent = this.$parent
  let depth = 0
  let cacheVnode = Object.create(null)
  vnode && (vnode.data.febAlive = true)
  while (parent && parent._routerRoot !== parent) {
    if (parent.$vnode && parent.$vnode.data.febAlive) {
      depth++
    }
    parent = parent.$parent
  }

  // 記錄緩存及其所在層級(jí)
  febCache[depth] = cache

  // /home/a backTo /other
  // 由于feb-alive實(shí)例會(huì)被保存，防止例如/home/a 后退到 /other的時(shí)候內(nèi)層feb-alive執(zhí)行render時(shí)候，多生成一個(gè)實(shí)例
  if (to.matched.length < depth + 1) {
    return null
  }
  if (from.matched[depth] === to.matched[depth] && (from.matched.slice(-1)[0] !== to.matched.slice(-1)[0])) {
    // ...
  } else {
    // ...
  }
  vnode.data.keepAlive = true
}

if (from.matched[depth] === to.matched[depth] && depth !== to.matched.length - 1) {
  // ...
} else {
  // ...
}

cache[key] = cache[key] || this.keys[this.keys.length - 1]
cacheVnode = getCacheVnode(cache, cache[key])
if (cacheVnode) {
  vnode.key = cacheVnode.key
  remove(keys, key)
  keys.push(key)
} else {
  this.cacheClear()
  cache[key] = vnode
  keys.push(key)
}

// 取到的是/home/a頁(yè)面的key
cache[key] = cache[key] || this.keys[this.keys.length - 1]

/foo -> /bar

/page/1 -> /page/2

/home/foo -> /home/bar 中的foo, bar組件

/home/foo/a -> /home/bar/a 中的foo, bar組件，注意a組件依然會(huì)走if邏輯，不過(guò)其操作沒(méi)有太大意義

/home/page/1 -> /home/page/2 中的page組件

// 根據(jù)規(guī)則拼接vnode key
vnode.key = `__febAlive-${key}-${vnode.tag}`

// 獲取緩存vnode
cacheVnode = getCacheVnode(cache, key)

// 判斷是否命中緩存vnode，此處還必須保證兩個(gè)vnode的tag相同
if (cacheVnode && vnode.tag === cacheVnode.tag) {
  vnode.key = cacheVnode.key
  vnode.componentInstance = cacheVnode.componentInstance
  remove(keys, key)
  keys.push(key)
} else {
  this.cacheClear()
  cache[key] = vnode
  keys.push(key)
}