qiankun微前端是什么?用户模块只在主应用还是主应用和子应用都有,子应用可以独立运行那还要主应用干嘛
时间: 2024-01-31 09:33:47 浏览: 29
qiankun是一个微前端框架,它可以将多个独立开发的子应用整合到同一个主应用中,实现统一的前端界面。主应用和子应用可以分别由不同的团队开发和维护,通过qiankun进行集成。
在qiankun中,用户模块可以存在于主应用或者子应用中,具体取决于你的需求和架构设计。如果用户模块只在主应用中存在,那么所有的子应用都将共享主应用的用户模块,子应用无需自己实现用户认证和权限控制等功能。
但是,即使子应用可以独立运行,还是需要主应用的存在。主应用在整个微前端架构中起到了协调和管理的作用。它负责加载和卸载子应用,并提供了路由、状态管理、全局样式等共享能力。主应用还可以处理跨子应用的通信和事件传递,实现子应用之间的交互。
因此,主应用在qiankun中的作用是不可或缺的,它提供了整个微前端架构的核心功能,并为子应用提供了共享的基础设施。
相关问题
qiankun里面的应用如何解决主应用和子应用通信,子应用之间跳转的代码
qiankun 提供了以下几种方式用于实现主应用和子应用之间通信:
1. props:主应用可以通过 props 把数据传输给子应用,子应用可以通过 props 接收主应用传递过来的数据。
2. emit:主应用可以通过 emit 触发一个自定义事件,并传递数据给子应用,子应用可以通过 on 监听该事件并接收数据。
3. onGlobalStateChange:主应用可以通过 onGlobalStateChange 方法注册一个全局状态改变的监听器,子应用可以通过 setGlobalState 方法向主应用发送全局状态改变的事件,并传递数据。
对于子应用之间的跳转,qiankun 中推荐的方式是使用 history.pushState 或者 location.href 来进行页面跳转。具体代码实现如下:
```javascript
// 子应用之间跳转
window.history.pushState({}, '', '/sub-app1'); // 使用 pushState 进行跳转
window.location.href = '/sub-app2'; // 使用 href 进行跳转
```
需要注意的是,跳转时需要保证子应用的路由规则是正确的,并且不能跨域。
qiankun里面的应用如何解决主应用和子应用通信,子应用之间通信
在 qiankun 中,主应用和子应用之间通信可以通过 props、emit、onGlobalStateChange 等方式实现,其中 onGlobalStateChange 是使用了基于 CustomEvent 的自定义事件机制实现的,可以跨应用进行状态通信。
而子应用之间的通信则需要依赖于主应用,可以使用主应用作为消息中心,然后子应用通过主应用的接口来实现通信。另外,qiankun 还提供了一些方案,如使用 postMessage、共享状态等方式实现子应用之间的通信。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)