从零实现 Qiankun 微前端：基座应用控制子应用路由与信息交互

原创

已于 2025-09-03 18:15:51 修改 · 284 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-07-19 16:50:54 首次发布

随着前端业务的快速发展，单体应用模式（Monolith）越来越难以支撑复杂业务场景。微前端（Micro Frontends）应运而生，它将大型应用拆解成多个子应用（Micro App），通过主应用进行统一调度和集成。

在微前端技术栈中，Qiankun（乾坤）是一个广泛使用的解决方案，基于 single-spa 封装，提供了开箱即用的微应用加载、沙箱隔离和通信机制。接下来，我们将通过一个完整的实践案例，从零构建并配置 Qiankun 微前端架构。

1.基座应用（主应用）配置

npm install qiankun --save

或者

yarn add qiankun

//router/index.ts

  {
    path: "/home",
    component: Home,
    meta: { requiresAuth: true },
    children: [
      { path: "", redirect: "/home/app-store" },

      {
        path: "app-store",
        name: "AppStoreHome",
        component: AppStore,
         meta: { requiresAuth: true },
      },

      {
        path: "app-store/:appPath(.*)*",
        name: "AppStoreSubApp",
        component: SubAppView,
        meta: { requiresAuth: true },
      },
      // ✅ 其他微前端子应用（不在 app-store 内部）
      {
        path: ":appPath(.*)*",
        name: "SubAppView",
        component: SubAppView,
        meta: { requiresAuth: true },
      },

    ]
  }

//SubAppView


<template>
    <div id="sub-container" class="sub-container"></div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, nextTick, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { loadMicroApp } from "qiankun";
import type { MicroApp } from "qiankun";


const route = useRoute();

/** 把 /home/…… 之后的部分全部拆成段 */
const segments = computed(() => {
  const raw = route.params.appPath;
  const str = Array.isArray(raw) ? raw.join("/") : String(raw || "");
  return str.split("/").filter(Boolean); 
});

/** 是否走了 app‑