qiankun应用级缓存-多页签缓存

需求：

A：主应用
B：子应用
项目框架：vue2 + 全家桶 + qiankun
应用间切换需要保存页面缓存（多页签缓存），通过vue keep-alive只能实现页面级缓存，在单独打开的应用里能实现缓存，但是子应用切换到主应用，那子应用的缓存失效

方案：

采用子应用切换时，将子应用作为一个vue实例，再次加载时使用保存的实例上的vnode替换vue实例化的时候的render函数

前提

1.项目已实现页面级缓存（其实就是通过keep-alive include来实现）

解决步骤

1.qiankun加载子应用的方式选择

1.通过registerMicroApps注册子应用，qiankun会通过自动加载匹配的子应用；
2.通过loadMicroApp手动注册子应用

第一种qiankun自动检测路有的变化来控制子应用的卸载和加载，我们无法监听到，也就无法去替换vnode，所以采用第二种，手动加载应用（通过路由的变化去监听下就行了）

//navbar。vau
watch: {
    $route(to, from) {
    //判断是否要加载 或卸载应用
      doQiankun(to, from)
      //这段代码时其他功能
      if (to.path.indexOf(ssoName) !== -1) {
        this.isShowssoAdmin = true
      } else {
        let timer = setTimeout(() => {
          this.isShowssoAdmin = false
          clearTimeout(timer)
        })
      }
    }
  },

//抽离的js

export const doQiankun = (to, form) => {
  if (to.path.indexOf(ssoName) !== -1 && (form.path.indexOf(ssoName) === -1 || !form.path)) {
    loadApp()
  } else if (to.path.indexOf(ssoName) !== -1 && form.path.indexOf(ssoName) !== -1) {
    console.log('子应用之间切换')
  } else {
    unLoadApp()
  }
}

export const loadApp = () => {
  // 手动加载微应用
  microApp = loadMicroApp({
    name: ssoName,
    entry: ssoUrl,
    container: `#${ssoName}`,
    props: { }
  })
}

/**
 * @description: 手动卸载微应用
 * @return {*}
 * @Date Changed:
 */
export const unLoadApp = () => {
  console.log('手动卸载微应用')
  // 手动卸载微应用
  if (microApp) microApp.unmount()
}

2.实现手动加载后，在子应用中unmount 卸载周期中存储实例

//main.js
//instance 其实就是new Vue()的实例
//loadedApplicationMap定义的对象
let loadedApplicationMap = {}
let instance = null
export async function unmount() {
  unmountCache(instance, loadedApplicationMap, instance.$router)
  router = null
}

/**
 * @description: qiankun卸载子应用时 保存子应用实例
 * @param {*} instance  子应用实例
 * @param {*} loadedApplicationMap 保存的对象
 * @param {*} _router 离开时的路由
 * @return {*}
 * @Date Changed:
 */
 //代码都不用改  保存一下退出应用前的实例
function unmountCache(instance = {}, loadedApplicationMap = {}, _router) {
  // 此处永远只会保存首次加载生成的实例
  const needCached = instance.cachedInstance || instance
  const cachedInstance = {}
  cachedInstance._vnode = needCached._vnode
  // keepalive设置为必须 防止进入时再次created，同keep-alive实现
  if (!cachedInstance._vnode.data.keepAlive) cachedInstance._vnode.data.keepAlive = true

  loadedApplicationMap._vnode = cachedInstance._vnode
  loadedApplicationMap.$router = _router
  loadedApplicationMap.apps = [].concat(_router.apps)
  loadedApplicationMap.currentRoute = { ..._router.currentRoute }


}

3.进入应用时，替换vnode
这里要区分是否是首次进入

光替换node 会导致原来的路由失效，所以同时也要针对路有进行处理

//main.js
let isFirst = true

function render(props = {}) {
  const { container } = props
  // 这里必须要new一个新的路由实例，否则无法响应URL的变化
  router = new VueRouter({
    // base: window.__POWERED_BY_QIANKUN__ ? '/ssoAdmin/' : '/',
    mode: 'hash',
    // mode: 'history',
    routes
  })

  // 这里主要是适配子应用的单独访问和继承访问
  let vnode = loadedApplicationMap._vnode || null
  if (isFirst) {
    // 首次进入应用
    routerBeforeEach() //自己定义的路由守卫
    instance = newVueInstance(vnode).$mount(container ? container.querySelector('#app') : '#app')
    isFirst = false
  } else {
    //  router使用缓存命中
    // router = loadedApplicationMap.$router;

    // 让当前路由在最初的Vue实例上可用
    router.apps.push(...loadedApplicationMap.apps)
    routerBeforeEach() //自己定义的路由守卫
    instance = newVueInstance(vnode)

    // 当前路由和上一次卸载时不一致，则切换至新路由
    const { path } = router.currentRoute
    const oldPath = loadedApplicationMap.currentRoute.path
    if (path !== oldPath) {
    //replace 替换 浏览器记录
      loadedApplicationMap.$router.replace({ path, query: router.currentRoute.query })
    }

    instance.$mount(container ? container.querySelector('#app') : '#app')
  }
}