created() {
  // 動態刪除緩存實例監聽
  this.cache = Object.create(null);
  breadCompBus.$on('removeTabByKey', this.removeCacheByKey);
  breadCompBus.$on('removeTabByKeys', (data) => {
    data.forEach((item) => {
      this.removeCacheByKey(item);
    });
  });
}

// 傳入`vue-keep-alive`的自定義方法
function updateComponentsKey(key, name, vnode) {
  const match = this.$route.matched[1];


  if (match && match.meta.multiNodeKey) {
    vnode.key = match.meta.multiNodeKey(key, this.$route);
    return vnode.key;
  }


  return key;
}

<template>
  <div id="app">
  <header>
    <router-link to="/app-vue-hash/">app-vue-hash</router-link>
    <router-link to="/app-vue-history/">app-vue-history</router-link>
    <router-link to="/about">about</router-link>
  </header>
  <div id="appContainer1" v-show="$route.path.startsWith('/app-vue-hash/')"></div>
  <div id="appContainer2" v-show="$route.path.startsWith('/app-vue-history/')"></div>
  <router-view></router-view>
</div>
</template>


<script>
import { loadMicroApp } from 'qiankun';


const apps = [
{
  name: 'app-vue-hash',
  entry: 'http://localhost:1111',
  container: '#appContainer1',
  props: { data : { store, router } }
},
{
  name: 'app-vue-history',
  entry: 'http://localhost:2222',
  container: '#appContainer2',
  props: { data : store }
}
]


export default {
  mounted() {
    // 優先加載當前的子項目
    const path = this.$route.path;
    const currentAppIndex = apps.findIndex(item => path.includes(item.name));
    if(currentAppIndex !== -1){
      const currApp = apps.splice(currentAppIndex, 1)[0];
      apps.unshift(currApp);
    }
    // loadMicroApp 返回值是 app 的生命周期函數數組
    const loadApps = apps.map(item => loadMicroApp(item))
    // 當 tab 頁關閉時，調用 loadApps 中 app 的 unmount 函數即可
  },
}
</script>

// keep-alive核心代碼
render () {
  const slot = this.$slots.default
  const vnode: VNode = getFirstComponentChild(slot)
  const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
  if (componentOptions) {
    // 更多代碼...
    // 緩存命中
    if (cache[key]) {
      vnode.componentInstance = cache[key].componentInstance
      // make current key freshest
      remove(keys, key)
      keys.push(key)
    } else {
      // delay setting the cache until update
      this.vnodeToCache = vnode
      this.keyToCache = key
    }
    // 設置keep-alive，防止再次觸發created等生命周期
    vnode.data.keepAlive = true
  }
  return vnode || (slot && slot[0])
}
// mounted和updated時緩存當前組件的vnode
mounted() {
  this.cacheVNode()
}
updated() {
  this.cacheVNode()
}

// 父應用提供unmountCache方法
function unmountCache() {
  // 此處永遠只會保存首次加載生成的實例
  const needCached = this.instance?.cachedInstance || this.instance;
  const cachedInstance = {};
  cachedInstance._vnode = needCached._vnode;
  // keepalive設置為必須 防止進入時再次created，同keep-alive實現
  if (!cachedInstance._vnode.data.keepAlive) cachedInstance._vnode.data.keepAlive = true;
  // 省略其他代碼...


  // loadedApplicationMap用于是key-value形式，用于保存當前應用的實例
  loadedApplicationMap[this.cacheKey] = cachedInstance;
  // 省略其他代碼...


  // 卸載實例
  this.instance.$destroy();
  // 設置為null后可進行垃圾回收
  this.instance = null;
}


// 子應用在qiankun框架提供的卸載方法中，調用unmountCache
export async function unmount() {
  console.log('[vue] system app unmount');
  mainService.unmountCache();
}

// 創建子應用實例，有緩存的vnode則使用緩存的vnode
function newVueInstance(cachedNode) {
  const config = {
    router: this.router,
    store: this.store,
    render: cachedNode ? () => cachedNode : instance.render, // 優先使用緩存vnode
  });
  return new Vue(config);
}


// 實例化子應用實例，根據是否有緩存vnode確定是否傳入cachedNode
this.instance = newVueInstance(cachedNode);
this.instance.$mount('#app');

// 實例化子應用vue-router
function initRouter() {
  const { router: originRouter } = this.baseConfig;
  const config = Object.assign(originRouter, {
    base: `app-kafka/`,
  });
  Vue.use(VueRouter);
  this.router = new VueRouter(config);
}


// 創建子應用實例，有緩存的vnode則使用緩存的vnode
function newVueInstance(cachedNode) {
  const config = {
    router: this.router, // 在vue init過程中，會重新調用vue-router的init方法，重新啟動對popstate事件監聽
    store: this.store,
    render: cachedNode ? () => cachedNode : instance.render, // 優先使用緩存vnode
  });
  return new Vue(config);
}


function render() {
  if（isCache） {
    // 場景一、重新進入應用（有緩存）
    const cachedInstance = loadedApplicationMap[this.cacheKey];


    // router使用緩存命中
    this.router = cachedInstance.$router;
    // 讓當前路由在最初的Vue實例上可用
    this.router.apps = cachedInstance.catchRoute.apps;
    // 使用緩存vnode重新實例化子應用
    const cachedNode = cachedInstance._vnode;
    this.instance = this.newVueInstance(cachedNode);
  } else {
    // 場景二、首次加載子應用/重新進入應用（無緩存）
    this.initRouter();
    // 正常實例化
    this.instance = this.newVueInstance();
  }
}


function unmountCache() {
  // 省略其他代碼...
  cachedInstance.$router = this.instance.$router;
  cachedInstance.$router.app = null;
  // 省略其他代碼...
}

// 自定義事件發布
const evt = new CustomEvent('microServiceEvent', {
  detail: {
    action: { name: action, data },
    basePath, // 用于子應用唯一標識
  },
});
document.dispatchEvent(evt);


// 自定義事件監聽
document.addEventListener('microServiceEvent', this.listener);

// 子應用main.js
let mainService = null;


export async function mount(props) {
  mainService = null;
  const { MainService } = props;
  // 注冊主應用服務
  mainService = new MainService({
  // 傳入對應參數
  });
  // 實例化vue并渲染
  mainService.render(props);
}
export async function unmount() {
  mainService.unmountCache();
}