javascript - 使用带有 vue 和 reactjs 的单水疗微前端时的布局中断

Question

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

对于不知道什么是单水疗的你，你可以在这里阅读：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

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

Answer 1

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

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

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