qiankun 微前端应用实践与部署(三)

本文介绍了在微前端架构下,如何配置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 只有命中 urlhttp://localhost:8889/live 才会加载子应用。

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

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

所以现在切换的 urlhttp://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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值