Single-spa切换微前端时如何实现Vuetify overlay加载态

问题描述 #

项目采用 single-spa 架构，包含 1 个根配置工程与多个 Vue 技术栈微前端应用，需要使用 Vuetify 的 overlay 组件展示应用加载、切换阶段的全局遮罩，想确认是否可以通过应用生命周期函数实现该需求。

现有工程代码 #

根配置文件 root-config.js #

import * as singleSpa from "single-spa";
let appUrl = ["/app1", "/app2"];

appUrl.forEach(url => {
  singleSpa.registerApplication({
    name: "@test" + url,
    app: () => System.import("@test" + url),
    activeWhen: [url],
  });
})
/* 待补充：设置加载遮罩的逻辑 */

微前端入口文件 main.js #

import Vue from 'vue'
import singleSpaVue from 'single-spa-vue'

import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    render (h) {
      return h(App, {
        props: {
          
        }
      })
    },
    router,
    vuetify
  }
})

export const bootstrap = [vueLifecycles.bootstrap, doneBootstrap]
export const mount = vueLifecycles.mount
export const unmount = vueLifecycles.unmount

function doneBootstrap() {
  /* 待补充：取消加载遮罩的逻辑 */
  return Promise.resolve();
}

实现逻辑说明 #

完全可以基于生命周期钩子实现需求，但需要调整逻辑的挂载层级，避免状态异常：

• 不要将遮罩控制逻辑放在微前端的 mount 生命周期中：这种写法会导致每个微应用都独立维护遮罩状态，多应用并行加载时会出现遮罩频繁闪现、状态不同步的问题
• 全局遮罩的统一控制逻辑需要放在根配置工程层：
  1. 在根配置工程中引入 Vuetify 依赖，独立实现 overlay 遮罩组件并挂载到根 DOM 节点，不需要依赖微应用的 Vuetify 实例
  2. 绑定 single-spa 的全局应用事件：当触发应用加载、bootstrap 流程时设置遮罩为显示状态；当应用完成 mount 渲染、路由切换完成后设置遮罩为隐藏状态
• 微应用侧的 bootstrap 完成回调中不需要重复调用遮罩关闭逻辑，避免遮罩刚触发显示就被提前关闭的视觉问题

内容的提问来源于stack exchange，提问作者Sathish Sundar