考虑这个一个问题，主应用使用 versea，目前接入两个子应用 A 和 B，假设 A 应用可以嵌套 B。

• 主应用 versea 路由配置如下：

const routes = [{
  path: 'a',
  apps: [A],
  children: [{
    path: 'a1',
    apps: [A],
  }, {
    path: 'b',
    apps: [B],
  }],
}]

• A 应用是 vue，使用 vue-router，配置如下：

const routes = [{
  path: 'a',
  component: Index,
  children: [{
    path: 'a1',
    component: ComponentA,
  }, {
    path: 'b',
    component: () => import('ComponentB'),
  }],
}]

• A 应用 ComponentA 内容如下：

<template>
  <div>ComponentA</div>
</template>

• A 应用 ComponentB 内容如下：

<template>
  <div>ComponentB</div>
  <!-- 用于嵌套 B 应用 -->
  <div id="inner_slot"></div>
</template>

复线步骤：

1. 当前路由是 /a/a1，A 和 B 应用已经加载过。
2. 现在由于用户点击浏览器前进或者后退，触发 popstate 事件。
3. popstate 优先走 reroute 内部逻辑，匹配需要 mount A 和 B 应用，A 应用已经是 mounted，那么会 mount B，可是此时页面上显示的 ComponentA 的内容，无法 mount B。

因此这里存在两个问题：

我们拦截了 popstate 事件，可是此时无法 mount B，需要应用 A 先完成 vue-router 路由匹配逻辑，然后渲染出 ComponentB，才会展示<div id="inner_slot"></div> 在页面上，有了id 是 inner_slot 的 div 才能交给 versea mount B 应用。

1. 可是我们已经拦截了 popstate 事件，应用 A vue-router 的路由匹配逻辑并不会执行。
2. 即使应用 A vue-router 完成路由匹配，我们看到加载渲染 ComponentB 是异步的，versea 怎么知道 应用 A 内部什么时刻渲染完成 ComponentB

并不是每个方法都可以添加超时设置，有些方法执行已经产生了副作用，而这些副作用在超时之后无法被销毁，因此不可以设置超时。

1. load 阶段执行的加载逻辑
2. waitForContainer 阶段

是否需要支持 redirect，如果需要支持，理由是什么，有什么场景？如果不需要，路由是什么？

除了 versea/core，还有一层 versea/versea 的封装

用于让不理解 inversify 的开发人员使用，不需要理解 inversify 的各种概念就能使用 versea

class Versea {
  constructor() {
    this.container = new Container({ defaultScope: 'Singleton' });
    this.container.load(buildProviderModule());
  }

  registerApp(options: AppOptions) {
    this.container.get(IAppService).registerApp(options);
  }
}

方案一

插件独立于 versea/core，也就是不依赖 versea/core 的依赖注入能力，依赖 versea/versea 的 Versea 类

class Versea {
  use(plugin: Plugin) {
    plugin.apply(this);
  }
}

插件写法如下：

class MyPlugin {
  constructor(options) {
    this.options = options;
  }

  apply(context) {
    context.container.get(IHooks).registerApp.tap('my-plugin', (hookParams) => {
      console.log(hookParams);
    });
  }
}

方案二

插件独立于 versea/core，不依赖 versea/versea 的 Versea 类，但依赖 versea/core 的依赖注入能力。

class Versea {
  use(pluginKey) {
    this.container.get(pluginKey).apply(this)
  }
}

插件写法如下：

@provide(IMyPlugin)
class MyPlugin {
  constructor(@inject(IHooks) hooks) {
    this._hooks = hooks;
  }

  apply(context) {
    this._hooks.registerApp.tap('my-plugin', (hookParams) => {
      console.log(hookParams);
    });
  }
}