vue使用qiankun框架心得和踩坑记录

最新推荐文章于 2025-06-19 17:04:51 发布

咩咩咩咩没

最新推荐文章于 2025-06-19 17:04:51 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 html 文章标签： vue.js typescript javascript

本文链接：https://blog.csdn.net/m0_67401153/article/details/123304474

本文详细记录了在Vue2.x项目中集成qiankun框架的过程，包括父子组件通信、路由跳转、样式冲突等问题的解决。通过安装qiankun，配置主应用和微应用的路由、生命周期、样式隔离等，实现了主应用与微应用的无缝切换。在微应用中使用主应用组件时，需将主应用组件挂载到window上，以便微应用调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**其他网站有很多如何引入，使用的案例，但是按部就班的做了还是有一些问题，因此来此在总结下：
vue2x使用qiankun框架经历
实现：
1、父子组件相互跳转
2、父-子传参，子接收
3、子使用父的组件
遇到问题：
1、路由跳转不成功
2、父子样式冲突
3、this.$router.push跳转问题，改为window.history.pushState跳转后，除了第一次主跳子，第二次会跳转到错误页面问题解决
**

第一步：安装 npm i qiankun -S
第二步：在主应用src目录下创建文件夹micros，俩个js文件 app.js 和 index.js.如图
在这里插入图片描述
app.js文件内容：

/**
　app.js导出的是上面registerMicroApps的第一个参数，是一个对象数组，其中数组每个字段的作用如下：

（1）name：微应用的名称，后面改造微应用的时候一定要与这个name对应

（2）entry：微应用运行的域名加端口，我用的是本地8088端口

（3）container：启动微应用需要一个dom容器，里面就是这个dom容器的 id

（4）activeRule：触发启动微应用的规则，当检测到url中含有activeRule的值时，将启动微应用

　　当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。
**/
const apps = [
  {
    name: 'micro-app-order',
    entry: '//localhost:9527',
    container: '#order-container',
    activeRule: '#/resourcesCore'
  }
]
export default apps

index.js文件内容：

/**
　　这里用到了官方的几个api：

（1）registerMicroApps：包含两个参数，第一个参数是微应用的一些注册信息，第二个参数是全局的微应用生命周期钩子。:

（2）addGlobalUncaughtErrorHandler：全局的未捕获异常处理器，微应用发生报错的时候亦可以用这个api捕捉。

（3）start：我们用来启动qiankun的方法，包含一个参数，具体的参数用途不再详述。

　　以上详细的api请点击查看官网API文档：https://qiankun.umijs.org/zh/api
**/
import {
  registerMicroApps,
  addGlobalUncaughtError