如何在single-spa中实现应用与对应路由的关联按需加载？

方案1：直接在对应路由下嵌套应用标签 #

如果app1和app2不需要作为settings/clients的子组件，仅需与对应路由应用同生命周期加载，可直接将它们的<application>标签放到对应<route>内部：

<html>
  <head>
    <template id="single-spa-layout">
      <single-spa-router>
        <nav class="topnav">
          <application name="@organization/nav"></application>
        </nav>
        <div class="main-content">
          <route path="settings">
            <application name="@organization/settings"></application>
            <!-- 仅settings路由匹配时加载app1 -->
            <application name="@organization/app1"></application>
          </route>
          <route path="clients">
            <application name="@organization/clients"></application>
            <!-- 仅clients路由匹配时加载app2 -->
            <application name="@organization/app2"></application>
          </route>
        </div>
        <footer>
          <application name="@organization/footer"></application>
        </footer>
      </single-spa-router>
    </template>
  </head>
</html>

这种方式利用single-spa-layout的路由匹配规则，只有当对应route被匹配时，内部的所有<application>才会被激活加载，完全满足需求，无需额外处理Parcel，是最直接的方案。

方案2：通过Parcel在宿主应用内动态挂载（适合父子应用通信场景） #

如果app1需要作为settings的子组件嵌入，或需要更灵活的控制逻辑，可使用Parcel API在settings应用的生命周期钩子中动态挂载：

步骤1：在settings应用中配置Parcel #

在@organization/settings的入口文件（如src/root.component.js）中：

import { mountRootParcel } from 'single-spa';
import app1ParcelConfig from '@organization/app1'; // 导入app1的Parcel配置

let app1Parcel = null;

export function mount(props) {
  // 挂载settings应用根组件（以React为例，其他框架逻辑类似）
  const root = document.getElementById('settings-root');
  ReactDOM.render(<SettingsApp />, root);

  // 动态挂载app1 Parcel
  app1Parcel = mountRootParcel(app1ParcelConfig, {
    domElement: document.getElementById('app1-container'), // 提前在settings模板中准备容器节点
    props: { ...props, customProp: 'some-value' } // 向app1传递自定义props
  });

  return Promise.resolve();
}

export function unmount(props) {
  // 卸载settings组件
  ReactDOM.unmountComponentAtNode(document.getElementById('settings-root'));

  // 同步卸载app1 Parcel
  if (app1Parcel) {
    return app1Parcel.unmount();
  }
  return Promise.resolve();
}

步骤2：同理处理clients和app2 #

在@organization/clients的入口文件中，用相同逻辑挂载app2 Parcel，并在unmount钩子中同步卸载。

这种方式的优势是支持父子应用的props传递、状态同步，适合复杂嵌套场景。

方案3：利用路由事件监听动态注册应用 #

如果需要在全局层面统一管理应用加载逻辑，可监听single-spa的路由变化事件，动态注册/激活应用：

在根配置文件（如src/single-spa-config.js）中：

import { registerApplication, start } from 'single-spa';

// 先注册基础应用
registerApplication({
  name: '@organization/nav',
  app: () => System.import('@organization/nav'),
  activeWhen: () => true
});

registerApplication({
  name: '@organization/footer',
  app: () => System.import('@organization/footer'),
  activeWhen: () => true
});

registerApplication({
  name: '@organization/settings',
  app: () => System.import('@organization/settings'),
  activeWhen: ['/settings']
});

registerApplication({
  name: '@organization/clients',
  app: () => System.import('@organization/clients'),
  activeWhen: ['/clients']
});

// 标记应用是否已注册
let app1Registered = false;
let app2Registered = false;

// 监听路由变化事件
window.addEventListener('single-spa:routing-event', (event) => {
  const newRoute = event.detail.newUrl;

  // 处理app1的动态注册
  if (newRoute.includes('/settings') && !app1Registered) {
    registerApplication({
      name: '@organization/app1',
      app: () => System.import('@organization/app1'),
      activeWhen: ['/settings']
    });
    app1Registered = true;
  }

  // 处理app2的动态注册
  if (newRoute.includes('/clients') && !app2Registered) {
    registerApplication({
      name: '@organization/app2',
      app: () => System.import('@organization/app2'),
      activeWhen: ['/clients']
    });
    app2Registered = true;
  }
});

start();

这种方式适合全局统一管控的场景，但逻辑相对复杂，一般优先推荐方案1或方案2。

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