千里之行，始于足下：Qiankun实践——彻底解决无法切换路由的问题

<--start-->

哈喽，大家好，我是海怪。今天想跟大家分享一个在使用 Qiankun 中遇到的问题，相信不少人也会遇到过，那就是：在主应用切换路由时，无法切换对应子应用的路由。好吧，这句话听着就不像人话，我来解释一下。

在使用 Qiankun 微前端框架开发应用时，我们通常会遇到这样的场景：主应用中存在多个子应用，每个子应用都有自己的路由。当我们在主应用中切换路由时，希望对应子应用的路由也能随之切换。然而，现实往往不如人意，在某些情况下，子应用的路由无法被正确切换。

造成这种问题的原因有很多，但最常见的原因是：子应用的路由配置不正确。

要解决这个问题，我们需要确保子应用的路由配置正确。具体来说，我们需要在子应用的 qiankun.config.js 文件中，正确配置 routes 字段。routes 字段是一个数组，其中包含子应用的所有路由配置。每个路由配置项都应该包含以下字段：

• path：子应用的路由路径。
• component：子应用的组件。
• exact：是否严格匹配路由路径。

比如，以下是一个子应用的路由配置示例：

routes: [
  {
    path: '/home',
    component: Home,
    exact: true,
  },
  {
    path: '/about',
    component: About,
    exact: true,
  },
]

配置好子应用的路由后，我们需要在主应用中注册子应用。在主应用的 qiankun.config.js 文件中，我们可以使用 registerMicroApps 方法注册子应用。registerMicroApps 方法的第一个参数是一个数组，其中包含所有子应用的配置。每个子应用的配置项都应该包含以下字段：

• name：子应用的名称。
• entry：子应用的入口文件。
• container：子应用的挂载节点。
• activeRule：子应用的激活规则。

比如，以下是一个主应用注册子应用的示例：

registerMicroApps([
  {
    name: 'app1',
    entry: 'http://localhost:3001',
    container: '#app1',
    activeRule: '/app1',
  },
  {
    name: 'app2',
    entry: 'http://localhost:3002',
    container: '#app2',
    activeRule: '/app2',
  },
])

注册好子应用后，我们需要在主应用中监听路由切换事件。当路由切换时，我们需要调用 qiankun.reload 方法重新加载子应用。qiankun.reload 方法的第一个参数是子应用的名称，第二个参数是子应用的路由路径。

比如，以下是在主应用中监听路由切换事件的示例：

window.addEventListener('hashchange', () => {
  const location = window.location.hash.slice(1)
  const activeMicroApp = qiankun.findActiveMicroApp()
  if (activeMicroApp) {
    qiankun.reload(activeMicroApp.name, location)
  }
})

通过以上步骤，我们就能够解决 Qiankun 中无法切换子应用路由的问题。希望对大家有所帮助。

最后，我想强调一下，在使用 Qiankun 时，一定要仔细阅读官方文档。官方文档中提供了非常详细的使用指南，可以帮助我们避免很多坑。

好了，今天的分享就到这里。感谢大家的阅读。我们下期再见！

<--end-->