qiankun微前端配置多个activeRule
时间: 2024-09-24 08:30:23 浏览: 37
微前端完整vue实例-乾坤【qiankun】
Qiankun 微前端是一种基于组件化思想的单页面应用架构,它允许你在单一的根应用程序中管理多个独立的功能模块(也称为子应用)。在配置多个 `activeRule` 的时候,`activeRule` 主要用于路由懒加载和动态切换功能,它通常与 Vue Router 或者类似的路由库一起使用。
每个 `activeRule` 是一个匹配规则,当对应的 URL 匹配到这个规则时,对应的应用会被激活并渲染。例如:
```json
[
{
path: '/module-a',
component: 'ModuleA',
activeRule: {
// 模块 A 的匹配条件,可以是路径、URL 查询参数等
path: '^/module-a'
}
},
{
path: '/module-b',
component: 'ModuleB',
activeRule: {
path: '^/module-b'
}
}
]
```
在这个例子中,当你访问 `/module-a` 或其子路径时,`ModuleA` 将被激活;同样,访问 `/module-b` 或其子路径时,`ModuleB` 将显示。如果你需要根据用户的登录状态或者其他条件动态选择激活哪一个模块,可以在 `activeRule` 中添加相应的判断逻辑,如通过 `params` 或者 `meta`.
阅读全文