微前端：单应用多路由实例渲染实践

// src/utils/useMicroApp.ts

import { LoadableApp, loadMicroApp, MicroApp, ObjectType } from 'qiankun'
import NProgress from 'nprogress'
import '../styles/nprogress.css'

export function useMicroApp() {
  // 维护一个 appMap，作为应用实例缓存
  const appMap: { [k: string]: MicroApp } = {}

  // 封装 loadMicroApp 方法，加点料
  const loadApp = (app: LoadableApp<ObjectType>) => {
		// 加载子应用前，出现加载进度条
    NProgress.start()
    // 调用 loadMicroApp 方法，传入参数
    const newApp = loadMicroApp(app)
    // 将新的微应用实例存入 appMap
    appMap[app.name] = newApp
    // 应用加载结束或错误时，关闭加载进度条
    newApp.mountPromise
      .then(() => {
        NProgress.done()
      })
      .catch(() => NProgress.done())
  }

  // 返回 appMap 和 loadApp
  return {
    loadApp,
    appMap
  }
}

export const mockMenu = [
  {
    path: 'childA',
    id: 'suygdf786qadf8a8sf8af878d7fa',
    name: '子应用A',
    entry: '//localhost:10001',
    children: [
      {
        path: 'child-a/page1',
        id: 'f083bcc9f0ea4a7c8e4cf30dfb066f93',
        name: '页面1',
        entry: '//localhost:10001'
      },
      {
        path: 'child-a/page2',
        id: 'ab34b1b1feab4f5abf950d1c9999c46d',
        name: '页面2',
        entry: '//localhost:10001'
      },
      {
        path: 'child-a/page3',
        id: 'aef8d6903a7e4db0b04b96d1403d406c',
        name: '页面3',
        entry: '//localhost:10001'
      }
    ]
  }
]

// src/App.vue

setup() {
    const menuList = ref<MenuList>(mockMenu)
    const { loadApp, appMap } = useMicroApp()
    const panes = ref<{ title: string; key: string; [k: string]: any }[]>([])
    const activePaneKey = ref(
      panes.value.length ? panes.value[0].key : undefined
    )

    async function handleClick(item: MenuItem) {
      const appId = item.id
      const isPaneExist = panes.value.some(p => p.key === appId)
      const microApp = appMap[appId]

      // 如果标签已经存在，切换到对应标签
      if (isPaneExist) {
        activePaneKey.value = appId
        return
      }

      // 不存在，创建新的标签，并激活标签，然后渲染微应用
      panes.value.push({
        title: item.name,
        key: appId
      })

      // 激活新的页签
      activePaneKey.value = appId

      // 在下一个 tick 执行加载微应用的逻辑，确保 DOM 容器生成了
      await nextTick()

      if (microApp) {
        // 如果子应用注册过了，重新mount一下就好
        microApp.mount()
      } else {
        // 首次加载，注册并加载子应用。传入 path 供子应用作路由跳转
        loadApp({
          name: appId,
          entry: item.entry,
          container: `#${appId}`,
          props: {
            path: item.path
          }
        })
      }
    }
    
}
// ...

// src/App.vue

function onPaneEdit(
      targetKey: string | MouseEvent,
      action: 'remove' | 'add'
    ) {
      if (typeof targetKey === 'string' && action === 'remove') {
        appMap[targetKey].unmount().then(() => {
          removePane(targetKey)
        })
      }
    }

import { createRouter, Router, RouterHistory } from 'vue-router'

export const routes = [
  {
    path: '/',
    component: () => import('../views/Page1.vue')
  },
  {
    path: '/page1',
    component: () => import('../views/Page1.vue')
  },
  {
    path: '/page2',
    component: () => import('../views/Page2.vue')
  },
  {
    path: '/page3',
    component: () => import('../views/Page3.vue')
  }
]

// 导出一个 createRouterByHistory 方法
export function createRouterByHistory(history: RouterHistory): Router {
  return createRouter({
    history,
    routes
  })
}

import './public-path'
import 'core-js/stable'
import 'regenerator-runtime/runtime'
import { App as VueApp, createApp } from 'vue'
import App from './App.vue'
import { createMemoryHistory, createWebHashHistory } from 'vue-router'
import { createRouterByHistory } from './router/index'
import { name as appName } from '../package.json'

// 应用是否作为微应用加载（在qiankun运行环境内）
const poweredByQiankun: boolean = (window as any).__POWERED_BY_QIANKUN__

// 如果是作为微应用加载，使用内存路由，否则使用 hash 路由
const history = poweredByQiankun
  ? createMemoryHistory(`/${appName}/`) // 使用 package.json 中的 name 字段作为路由的 base, 与主应用传入的 path 对应
  : createWebHashHistory()

// 传入 history，创建路由
const router = createRouterByHistory(history)

interface QiankunProps {
  [k: string]: any
  path?: string
  container?: Element
}

// 全局变量，Vue 应用实例，用于方便在 unmount 中访问
let app: VueApp | null

// 应用渲染函数
function render(props: QiankunProps) {
  // 主应用传过来的加载路径，如果不是作为微应用访问，path为 undefined
  const { path, container } = props
  // 每次 render 都重新创建一个新的应用实例
  app = createApp(App)
  app.use(router).mount(container ? container.querySelector('#app') : '#app')
  // 如果作为微应用加载，且主应用传来了 path ,跳转到此 path (内存路由)
  if (poweredByQiankun && path) {
    router.push(path)
  }
}

// 独立运行时,直接调用 render 方法，正常渲染应用
if (!poweredByQiankun) {
  render({})
}

/* 👇 qiankun 微应用钩子函数 👇 */
export async function bootstrap() {
  console.log('bootstrap')
}

export async function mount(props: QiankunProps) {
  render(props)
}

export async function unmount() {
  if (app) {
    app.unmount()
    app._container.innerHTML = ''
    app = null
    history.destroy()
  }
}