微前端架构下,主应用有自己的路由模块,同时主应用支持以微前端的方式嵌入业务模块(子应用),如何实现呢?
关于路由
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