主应用使用vue，并且使用了路由懒加载

[daichunlin1995]

What happens?

主应用使用vue，并且使用了路由懒加载，当子应用加载之后，切换主应用的路由，相对应懒加载的组件样式不加载

复现

1.在加载子应用之后切换到该页面

2.加载子应用之前点击切换到该页面

相关环境信息

• qiankun 版本：2.0.5
• 浏览器版本：chrome
• 操作系统：win10

[kuitos]

提供可复现仓库

[daichunlin1995]

提供可复现仓库

https://github.com/daichunlin1995/qiankun-demo.git

[kuitos]

跟这个是同一个问题？#503 @Deturium

[daichunlin1995]

跟这个是同一个问题？#503 @Deturium

嗯，应该是一个问题，请问这个该怎么解决啊

[zhxx]

遇到了相同的问题，看了下，是因为document.head.appendChild被改写了，导致vue-style-loader没有把样式加到正确的节点上。@kuitos 有什么建议吗？

[zhxx]

vue-router在路由变化之前加载资源，加载完毕再跳转。因为路由没有变化，qiankun判断微应用还是activated状态，用newAppendChild加载css。

const activated = checkActivityFunctions(window.location).some(name => name === appName); // only hijack dynamic style injection when app activated if (activated) { dynamicStyleSheetElements.push(stylesheetElement); return rawAppendChild.call(appWrapperGetter(), stylesheetElement) as T; }

我觉得是不是可以加一个手动卸载微应用的方法？@Deturium

[zhxx]

目前解决这个问题的临时方案如下：
在main.js里保存一份appendChild，然后在vue-router的钩子函数beforeEach里判断to.path是不是微应用，如果不是，就把HTMLHeadElement.prototype.appendChild改回来

[kawhi66]

应该考虑从沙箱内部做隔离，在修正引导阶段的副作用的时候，可以考虑通过 assetPublicPath 隔离站点资源。

// only hijack dynamic style injection when app activated
if (
  activated &&
  stylesheetElement.baseURI.startsWith(assetPublicPath)
) {
  dynamicStyleSheetElements.push(stylesheetElement);

  const appWrapper = getWrapperElement(appName);
  assertElementExist(appName, appWrapper);
  return rawAppendChild.call(appWrapper, stylesheetElement) as T;
}

[warplan]

遇到了相同的问题，在不同的子应用来回切换，会引发样式丢失现象

[shuyanzi]

遇到了相同的问题，在不同的子应用来回切换，会引发样式丢失现象
同问
1、子应用用动态style的方式，子应用间来回切换会出现样式丢失的问题
2、子应用用动态link的方式，子应用间切换会样式闪烁，css资源加载慢，等一会儿才正常

@kuitos

[liuzhen88]

遇到了相同的问题，在不同的子应用来回切换，会引发样式丢失现象
同问
1、子应用用动态style的方式，子应用间来回切换会出现样式丢失的问题
2、子应用用动态link的方式，子应用间切换会样式闪烁，css资源加载慢，等一会儿才正常

@kuitos

我也遇到了这种问题，有解决办法吗？

[littleluckly]

遇到了相同的问题，在不同的子应用来回切换，会引发样式丢失现象
同问
1、子应用用动态style的方式，子应用间来回切换会出现样式丢失的问题
2、子应用用动态link的方式，子应用间切换会样式闪烁，css资源加载慢，等一会儿才正常

@kuitos

我也遇到了这种问题，有解决办法吗？

#578 有人回答了，不知道可不可行

[lkiarest]

测试了一下，动态样式丢失的情况出现在 dynamicAppend.ts 最后一行 rebuild 中的处理，

if (mounting) {
        dynamicStyleSheetElements = [];
}

子应用切换的时候，有的样式是在动态加载的 js 脚本里创建的，这个时候 mounting 为 true，导致缓存的样式被清理掉了，第二次切换样式就会丢失（貌似第二次加载也不会再通过动态 js 去创建了）。