使用带有 vue 和 reactjs 的单 spa 微前端时的布局中断答案

【问题标题】：Layout Break when using single-spa micro frontend with vue and reactjs使用带有 vue 和 reactjs 的单 spa 微前端时的布局中断
【发布时间】：2020-06-24 05:57:31
【问题描述】：

我的单水疗项目有问题，我不知道为什么，但有时我的单水疗会破坏布局，例如底部的页眉和其上方的内容，或页脚下方的内容。

不知道single-spa的你可以看这里：https://single-spa.js.org/docs/examples

这是我的注册应用程序：

import { registerApplication, start } from "single-spa";
import * as isActive from "./activity-functions";

registerApplication(
  "@vue-mf/vue-navbar",
  () => System.import("@vue-mf/vue-navbar"),
  isActive.vueNavbar
);

registerApplication(
  "@vue-mf/rate-dogs",
  () => System.import("@vue-mf/rate-dogs"),
  isActive.vueComponent
);

registerApplication(
  "@react-mf/people",
  () => System.import("@react-mf/people"),
  isActive.reactComponent
);

registerApplication(
  "@vue-mf/vue-footer",
  () => System.import("@vue-mf/vue-footer"),
  isActive.vueFooter
);

start();

这是我的活动功能：

export function prefix(location, ...prefixes) {
  return prefixes.some(
    prefix => location.href.indexOf(`${location.origin}/${prefix}`) !== -1
  );
}

export function vueNavbar(location) {
  // The navbar is always active
  return true;
}

export function vueComponent(location) {
  return prefix(location, "rate-doggos");
}

export function reactComponent(location) {
  return prefix(location, "people");
}

export function vueFooter(location) {
  // The footer is always active
  return true;
}

为了更好的可视化，这是布局中断的示例：

我正在使用带有 vue 和 react 的单水疗中心

有人可以帮我解决这个问题吗？我对这种布局中断感到很困惑

【问题讨论】：

标签： javascript reactjs vue.js micro-frontend

【解决方案1】：

我有同样的问题，我猜这是异步加载每个应用程序的结果，渲染顺序将取决于首先返回哪个应用程序。

Joel Denning 似乎意识到了这一点，并创建了一个布局引擎来处理它：https://single-spa.js.org/docs/layout-overview。

但是，它仍处于测试阶段，我发现它仍有一些限制，但也许它会满足您的需求。

【讨论】：