quankun框架Vue3主应用

安装qiankun框架

npm i qiankun

路由控制

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { close, start } from '@/utils/nprogress'
const routes: RouteRecordRaw[] = []
routes.push({
  path: '/',
  name: '首页',
  component: () => import('../views/Home.vue')
})
routes.push({
  path: '/meeting/:pathMatch(.*)*',
  name: '乾坤框架',
  meta: {
    keepAlive: false,
    microApp: true
  },
  component: () => import('../views/qiankun/index.vue')
})

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to) => {
  start()
})

router.afterEach(() => {
  close()
})

export default router

组件封装

<template>
  <div class="qiankun">
    <div id="microAppContainer"></div>
  </div>
</template>

<script setup lang="ts">
import { registerMicroApps, start } from 'qiankun'
import { useRoute } from 'vue-router'
const route = useRoute()

const apps = [
  {
    name: '会议管理',
    entry: '//localhost:8081',
    container: '#microAppContainer',
    activeRule: '/meeting/'
  }
]

registerMicroApps(
  apps,
  {
    beforeLoad: (app) => {
      return new Promise<void>((resolve) => {
        console.log('before load', app.name)
        resolve()
      })
    },
    beforeMount: (app) => {
      return new Promise<void>((resolve) => {
        console.log('beforeMount', app.name)
        resolve()
      })
    }
  }
)
start()
</script>

<style scoped lang="scss">
.qiankun{
  width: 100%;
  height: 100%;
}
</style>

主应用：https://www.jianshu.com/p/48d74801b4c4
子应用链接：https://www.jianshu.com/p/6c3feb4c1062
vite子应用：https://www.jianshu.com/p/d364e6621b63