Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2.4.5版本以后的一个修改导致了如果默认打开的URL是子应用,切换路由回主应用时CSS会不加载 #2176

Closed
chen735623058 opened this issue Jul 7, 2022 · 15 comments

Comments

@chen735623058
Copy link

发生版本 2.4.5-2.7.3都有这个问题
通过调试发现是因为 proxySandbox这个文件中的下图方法

image

放到这个if判断中就可以解决,希望后续版本能解决

@chen735623058
Copy link
Author

image
就是因为这次代码更新引起的

@githubCK
Copy link

这个问题感觉挺严重啊,官方什么时候给解决一下,更新个版本!

@github-actions
Copy link

Hello @chen735623058. In order to facilitate location and troubleshooting, we need you to provide a realistic example. Please forking these link codesandbox or clone qiankun examples to your GitHub repository.

你好 @chen735623058, 为了方便定位和排查问题,我们需要你提供一个重现实例,请提供一个尽可能精简的链接 codesandbox 或直接 clone qiankun examples,并上传到你的 GitHub 仓库。

@kuitos
Copy link
Member

kuitos commented Jul 12, 2022

@gongshun 帮忙确认一下?我这里好像复现不了

@gongshun
Copy link
Collaborator

我也复现不了

@chen735623058
Copy link
Author

你好,我写了例子工程,可以复现这个问题,并且我也找到了出现这个问题的原因,是在切换回路由的时候同时调用了主工程菜单导致,能给我一下你的邮件或者联系方式吗?我发例子工程给你,因为工程涉及到一些内部项目结构,不太想把这个程序放到git上,

@chen735623058
Copy link
Author

@kuitos

@kuitos
Copy link
Member

kuitos commented Jul 14, 2022

你好,我写了例子工程,可以复现这个问题,并且我也找到了出现这个问题的原因,是在切换回路由的时候同时调用了主工程菜单导致,能给我一下你的邮件或者联系方式吗?我发例子工程给你,因为工程涉及到一些内部项目结构,不太想把这个程序放到git上,

抽一个最小复现放出来,或者直接在example上改

@mewangbin
Copy link

mewangbin commented Aug 12, 2022

我也发现这个问题了,场景:
1.主应用main-app 是一个多标签页的项目,通过loadMicroApp 手动加载 子应用sub-app
2.子应用sub-app 挂载在主应用main-app 的 /dashboard/sub-app/下。
3.访问步骤:
a)打开:http://localhost:xxx/main-app/dashboard/sub-app/sub-route1,将在main-app下新增一个标签页 用来显示 子应用的sub-route1
b)如果通过路由切换到主应用对应的组件,可以通过
setCurrentRunningApp(null);

const rawAppendChild = HTMLHeadElement.prototype.appendChild;
const rawAddEventListener = window.addEventListener;
HTMLHeadElement.prototype.appendChild = rawAppendChild;
window.addEventListener = rawAddEventListener;
这种方式 在 路由守卫那里做处理,能保证切换到主路由的组件样式正常
c) 但是,如果不是路由切换的,只是主应用的动态组件(diag?? drawer?? ),style动态插入到header这种,会发现加载不了style。其实用b)的方式还是可以处理这种情况的。

@chen735623058 简单粗暴方式,不知道你那里有没有更好的处理方式。

@chen735623058
Copy link
Author

我发现这个问题的根本原因就是因为在代码里面通过get的代理监听了所有的对象变化然后处理样式是否是当前已加载的样式,再处理是否要加载新样式,这里有一个问题如果在切换路由的同时去改变页面的布局这种情况会有很多的Object属性发生变化,导致这个切换样式的判断事件无法在一帧之内完成,就会导致样式没有加载样式,特别是样式是挂在母工程上的,因为母工程的路由本来就不用需要去下载子工程的代码可以直接跳转页面。所以有两个方法可以解决

  1. 就是我上面说的改qiankun的源码
  2. 是在路由值守里面增加一个延时
router.beforeEach(async (to, from, next) => {
    if (hasToken) {
        // 这里获取一下当前的用户权限,主要是防止每次访问页面都要重新注册路由
        const hasRoles = store.getters.roles && store.getters.roles.length > 0;
        if (hasRoles) {
            // !!!!!! 发现就是在切换路由的时候因为业务需求需要根据路由的标记切换左侧的目录 就会引起这个问题
            store.dispatch('Permission/changemenurouters', _menutype);
            加上一个setTimeout 也可以解决,但是根源还是在框架里面的那一行代码
            setTimeout(()=> {
                next();
            },500)
        }
});

@Raven2049
Copy link

同有此问题,官方什么时候修复一下

@zhaojiankun6
Copy link

@chen735623058 你现在是暂时修改的源码解决吗?

@chen735623058
Copy link
Author

@ zhaojiakun6 不是的 我这边是在切换路由的时候加了一个延时解决的。
router.beforeEach(async (to, from, next) => { if (hasToken) { // 这里获取一下当前的用户权限,主要是防止每次访问页面都要重新注册路由 const hasRoles = store.getters.roles && store.getters.roles.length > 0; if (hasRoles) { // !!!!!! 发现就是在切换路由的时候因为业务需求需要根据路由的标记切换左侧的目录 就会引起这个问题 store.dispatch('Permission/changemenurouters', _menutype); 加上一个setTimeout 也可以解决,但是根源还是在框架里面的那一行代码 setTimeout(()=> { next(); },500) } });

@github-actions
Copy link

Since the issue was labeled with Need Reproduction, but no response in 30 days. This issue will be close. If you have any questions, you can comment and reply.
由于该 issue 被标记为需要可复现步骤,却 30 天未收到回应。现关闭 issue,若有任何问题,可评论回复。

@chengxuan12
Copy link

image 就是因为这次代码更新引起的

这块代码的更新,看上去是为了解决 #1266 的问题。

我用的是2.8.0版本。 this.registerRunningApp(name, proxy) 等价于
setCurrentRunningSandboxProxy(proxy);
nextTick(() => setCurrentRunningSandboxProxy(null));

我也出现了这个问题。因为发现触发的是get里的 'Symbol(Symbol.unscopables)'。
所以尝试放在 if (p === Symbol.unscopables) return unscopables; 的后面。

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants