前端微服务-qiankun从0到1搭建（主要核心点）以及需要注意的地方

皮的狠

已于 2023-01-07 12:09:14 修改

阅读量2.9k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： qiankun前端微服务文章标签：前端微服务 vue.js

于 2022-12-13 15:26:34 首次发布

本文链接：https://blog.csdn.net/qq_41709082/article/details/128301646

记录前端微服务-qiankun从0到1搭建（主要核心点）需要注意的地方

前言：

由于我们公司的项目基本都是后台管理系统类的，所以要求微应用入口必须是主应用的一个路由菜单、而且需要处理菜单权限、信息共享等问题、但是qiankun官方文档中案例记录中使用的都是registerMicroApps方法来进行引入子应用的配置、导致项目刚开始的时候踩了很多坑。所以在此记录一下一些需要注意的点。文章末尾有自己搭建的简易的主应用模板、以及微应用模板、后续需要使用可以直接clone下来，稍微改改就能用了。

问题：
(1). 使用registerMicroApps注册微应用的时候，无法解决路由缓存、子应用动态路由（权限）等一系列问题。
解决方案：
改成使用loadMicroApp方法来动态加载子应用、在主应用某个菜单的mounted生命周期中去load子应用，然后当这个菜单组件销毁的时候随之将子应用销毁。此处我是直接将其封装成了公用组件、其他所有子应用都是用这个组件来映射。
子应用挂载的组件
代码：(/layout/components/microAppView.vue)
此处使用keep-alive标签来保持子应用活性、防止切换不同子应用时，重新创建子应用、导致缓存销毁。

<template>
  <keep-alive>
    <component :is="microAppMap[showApp]"></component>
  </keep-alive>
</template>
<script lang="ts">
export default {
   
   
  name: "MicroAppView"
};
</script>
<script lang="ts" setup>
import {
   
    computed } from "vue";
import {
   
    getConfigByPath } from "@/plugin/qiankun/index";
import {
   
    useRoute } from "vue-router";
import homeApp from "./microApp/homeApp.vue";
import vueApp from "./microApp/vueApp.vue";
import {
   
    GeneraDataType } from "@/interface";
const route = useRoute();
const microAppMap: GeneraDataType = {
   
   
  "/app-vue/": vueApp,
  "/home-vue/": homeApp
};
const showApp = computed<string>(() => {
   
   
  const {
   
    configKey } = getConfigByPath(route.path);
  return configKey;
});
</script>

子应用-挂载组件（由于多子应用缓存问题、不同子应用需要创建不同的组件）
统一存放在 (/layout/microApp/.vue)
例子： /layout/microApp/.vue

<script lang="ts">
export default {
   
   
  name: "HomeApp"
};
</script>
<script lang="ts" setup>
import {
   
    onMounted, onUnmounted } from "vue";
import InitHook from "../composables/microAppView/initHook";
import microAppRender