qiankun微前端开发多页签缓存及刷新实现方式

一、基于微前端qiankun的多页签缓存方案实践

1、多个子应用同时存在
在dom上通过v-show控制显示哪一个子应用，及display:none;控制不同子应用dom的显示隐藏

1.png

1.png

url变化时，在路由守卫那控制通过loadMicroApp手动控制加载哪个子应用

2.png

缓存的菜单信息放在vuex状态管理里面，实时更新新增和删除菜单

3.png

然后在每个子应用使用keep-alive，通过include缓存页面

3.png

以上多页签缓存就实现了。需要注意的是在系统退出后记得手动调用unmount方法卸载子应用。不然退出登录不刷新直接在登录进来页面会空白

4.png

具体代码如下
1、主应用代码

主应用.vue
<template>
  <div>
    <div class="main-page-wrapper">
          <router-view v-show="widgets[showIndex].type === 'main'" />
          <div
            v-show="widgets[showIndex].type !== 'main'"
            id="sub-project-container"
          >
            <div
              v-for="(app, index) in microApps"
              :key="index"
              v-show="route.path.startsWith(app.activeRule)"
              :id="`appContainer${index + 1}`"
            ></div>
          </div>
        </div>
  </div>
</template>

<script>
import microApps from '@/micro'
</script>

micro/index.js
const microApps = [
  {
    name: 'join-ewms-base-module',
    entry: process.env.VUE_APP_JOIN_EWMS_BASE_MODULE_PROJECT,
    container: '#appContainer1',
    activeRule: '/join-ewms-base-module',
    props: {
      data: 'join-ewms-base-module子应用',
      mainAppRouter: router,
      mainAppHttp: http,
      mainAppStore: store,
      mainAppUtils: utils,
      mainAppExcel: excel,
      mainAppCommonRequestMethod: commonRequestMethod
    }
  },
  {
    name: 'join-ewms-ish-module',
    entry: process.env.VUE_APP_JOIN_EWMS_ISH_MODULE_PROJECT,
    container: '#appContainer2',
    activeRule: '/join-ewms-ish-module',
    props: {
      data: 'join-ewms-ish-module子应用',
      mainAppRouter: router,
      mainAppHttp: http,
      mainAppStore: store,
      mainAppUtils: utils,
      mainAppExcel: excel,
      mainAppCommonRequestMethod: commonRequestMethod
    }
  }
]
// 子应用
export default microApps

路由

route.js
let activeApps = {}
router.beforeEach(async (to, from, next) => {
  const conf = microApps.find(item => to.path.indexOf(item.activeRule) !== -1)
  if (to.path === '/login') {
    activeApps = {}
    // 主应用内跳转
    next()
  } else {
    const refresh = sessionStorage.getItem('afterRefresh')
    if (refresh === 'true') {
      sessionStorage.setItem('afterRefresh', 'false')
      next({ path: '/' })
    } else {
      // 应用跳转
      if (conf) {
        const cacheMicro = activeApps[conf.activeRule]
        // 已缓存应用
        if (cacheMicro) {
          next()
          return
        }
        // 未缓存应用
        if (conf.activeRule === '/join-ewms-mip-module') {
          activeApps[conf.activeRule] = loadMicroApp({ ...conf, router }, { sandbox: { experimentalStyleIsolation: true } })
        } else {
          activeApps[conf.activeRule] = loadMicroApp({ ...conf, router })
        }

        next()
      } else {
        // 主应用内跳转
        next()
      }
    }
  }
})

// 卸载子应用方法
export function unmountMicroApps () {
  for (const key in activeApps) {
    activeApps[key].unmount()
    delete activeApps[key]
  

2、子应用代码

App.vue
<template>
  <el-config-provider :locale="locale">
    <router-view #default="{Component}">
      <keep-alive :include="cacahview">
        <component
          :is="Component"
          :key="route.fullPath"
        />
      </keep-alive>
    </router-view>
  </el-config-provider>
</template>

<script>
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import actions from '@/shared/actions'
export default {
  name: 'AppComponent',
  setup () {
    const route = useRoute()
    const store = useStore()
    const cacahview = ref([])
    actions.onGlobalStateChange(state => {
      const { cachedViews } = state
      const data = cachedViews.map(item => {
        return {
          menu_id: item.menu_id,
          cache: item.menu_url.split('/')[2]
        }
      })
      data.shift()
      cacahview.value = data.map(item => {
        if (item.cache.indexOf('?') !== -1) {
          item.cache = item.cache.split('?')[0]
        }
        if (item.cache === 'OutputTemplate') {
          item.cache = `OutputTemplate${item.menu_id}`
        }
        return item.cache
      })
    }, true)
    return {
      locale: zhCn,
      route,
      cacahview
    }
  }
}
</script>

<style lang="scss">
</style>

二、如何在主应用刷新具体缓存子页面

实现方式是，点击刷新按钮，跳转到一个过渡页面，然后过渡页面在跳回原来的页面

1.png

过渡页面

2.png