vue2.0+qiankun踩坑(更新中...)

729 阅读1分钟

一、注册的子应用对应的项目没运行的话,运行主应用会报错

报错.png

报错1.png注释掉后不报错

二、先把路由实例化,再做子应用路由跳转,会404

一般,路由文件(routers)里会先把路由实例化再挂载应用,如果是静态路由没什么问题,页面也都会出来,

image.png ,但如果是动态路由,静态路由先实例化后就没用了,原因是先实例化路由再挂载应用,用的还是静态路由,所以应该按照这几步来编码

  1. 获取动态路由
  2. 路由实例化
  3. 应用挂载

下面是我的解决方法,

  1. 取消实例化image.png
  2. 获取动态路由,设置路由并且实例化,getRouter(router)对应的文件(或者函数)是设置动态路由,使动态路由能直接用image.pngimage.png
  3. 应用挂载

三、子应用第一次跳转正常,第二次跳转页面空白

四、qiankun子应用使用element-ui,弹窗内的样式无效,我认为是这个原因,首先看一张截图

微信截图_20220223094731.png

从这个截图可以看见弹窗元素的层级比子系统还高,qiankun严格模式下(strictStyleIsolation为true),qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点,子应用内的元素会被添加一个前缀

// 假设应用名是 react16
.app-main {
  font-size: 14px;
}


div[data-qiankun-react16] .app-main {
  font-size: 14px;
}

而弹窗不在微应用的容器内,不会被添加前缀,所以弹窗的样式无效,我暂时没想到解决方法。如果有解决方法或者建议的大神,欢迎指点一二!