Single SPA 如何监听 URL 变化

single-spa 6.x 使用 popstate 事件和 hashchange 事件来监听浏览器 URL 的变化，并且它还会拦截链接点击和表单提交事件来确保 URL 变化时能够正确处理路由。

当你调用 start() 方法时，single-spa 会设置事件监听器来监听 URL 的变化，并在变化时根据注册的应用和活动函数判断哪些应用需要被加载、挂载或卸载。

以下是一个使用 single-spa 6.x 的基本代码示例，说明了 single-spa 如何配置和启动，以及如何注册应用并监听 URL 的变化：

javascript 复制代码

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

// 注册子应用，提供加载函数和活动条件
registerApplication({
  name: 'app1',
  app: () => System.import('app1'), // 加载子应用的函数
  activeWhen: location => location.pathname.startsWith('/app1'),
});

registerApplication({
  name: 'app2',
  app: () => System.import('app2'), // 加载子应用的函数
  activeWhen: ['/app2'], // 活动条件，可以是字符串、函数或者数组
});

// 启动 single-spa
start();

在这个例子中，registerApplication 用于注册两个子应用 app1 和 app2。activeWhen 参数定义了子应用何时应该被激活，这里是当 URL 路径以 /app1 或 /app2 开头时。

single-spa 的 start 函数会设置好监听 URL 变化的逻辑，但是 single-spa 本身的源码中是如何设置的呢？下面是一个简化的示例，说明 single-spa 是如何内部设置这些监听器的：

javascript 复制代码

function urlReroute() {
  // 此函数负责检查当前活动的应用，并根据需要加载、挂载或卸载它们
}

// 监听 popstate 事件
window.addEventListener('popstate', urlReroute);

// 监听 hashchange 事件（如果你的应用使用了 hash 路由）
window.addEventListener('hashchange', urlReroute);

// 拦截所有的链接点击事件
window.addEventListener('click', function(event) {
  // 检查点击事件是否应该导致路由切换，并在必要时调用 urlReroute
});

// 拦截表单提交事件
window.addEventListener('submit', function(event) {
  // 检查表单提交是否应该导致路由切换，并在必要时调用 urlReroute
});

在实际的 single-spa 库中，上述逻辑会更加复杂，因为它需要处理许多边缘情况和浏览器兼容性问题。不过，上面的代码给出了如何使用原生 JavaScript 事件监听器来监听 URL 变化的大致思路。实际上 single-spa 还封装了这些逻辑，并提供了一些配置选项来优化性能和行为。

请注意，single-spa 的实际源码会更加复杂，并包含许多额外的检查和处理流程，上面的代码仅仅是一个说明性的简化版。