将单spa微前端与vue和reactjs配合使用时的布局中断

Question

我有一个问题在我的单一水疗项目，我不知道为什么，但有时我的单一水疗打破布局，如有时标题在底部和它上面的内容，或在页脚下的内容。

对于那些不知道什么是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一起使用单spa

有人能帮我解决这个问题吗？我对这个布局中断很困惑

Answer 1

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

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

然而，它仍然处于测试阶段，我发现它仍然有一些局限性，但也许它可以满足你的需求。