qiankun 微前端应用实践与部署（三）

最新推荐文章于 2024-09-14 18:02:06 发布

飘香的豆腐

最新推荐文章于 2024-09-14 18:02:06 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/CHEN741755613/article/details/108587795

版权

本文介绍了在微前端架构下，如何配置qiankun的主应用和子应用路由，以实现路由模式的兼容和子应用的正确加载。主应用采用Hash模式，子应用需要添加特定前缀并设置为Hash模式，确保路由匹配成功。通过调整路由配置文件和入口文件，实现子应用在主应用中的无缝切换。

摘要由CSDN通过智能技术生成

微前端架构下，主应用有自己的路由模块，同时主应用支持以微前端的方式嵌入业务模块（子应用），如何实现呢？

qiankun 在主应用初始化会自动监听路由的变化去匹配注册好的子应用路由活动规则，同时 vue 路由也会监听路由变化。

因为主应用有自己的业务模块，需要支持页面刷新，所以采用 hash 路由模式。qiankun 官方 demo 使用的是 history 路由模式。

那么，采用 hash 路由模式的话，主应用路由会有 /#/ 的前缀，比如主应用的 resource 组件路由：

http://localhost:8889/#/resource

假设 history 路由模式下子应用的注册信息为：

{
   
  name: 'live',
  entry: '//localhost:7102',
  container: '#subapp-viewport',
  activeRule: '/live',
}

此时 qiankun 只有命中 url 为 http://localhost:8889/live 才会加载子应用。

此处假设使用的路由切换代码为：

this.$router.push({
   
  path: '/live'
})

所以现在切换的 url 是 http://localhost:8889/#/live，显然不能匹配 /live，所以加载子应用失败。我们需要修改一下子应用注册的 activeRule，使得匹配 hash 路由模式。

为了区分开主应用的自身模块与子应用的路由区别，子应用的路由增加 /micro 前缀，比如 /micro/live 是子应用的路由。

那么 hash 路由模式下子应用的注册信息变成：

{
   
  name: 'live',
  entry: '//localhost:7102',
  container: '#subapp-viewport',
  activeRule: '/#/micro/live',
}

路由切换代码修改为：

this.$router.push({
   
  path: '/micro/live'
})

这样的话，主应用路由切换后的 url 就能命中子应用的 activeRule 了。

同时，子应用也需要将路由模式设置为 hash 模式，否则，会出现在子应用切换自身路由时，改变主应用 hash 路由的情况。比如子应用切换自身路由 /about，此时 url 会变成 http://localho

关注