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

主应用是普通的vue项目(非umi搭建), 子应用umi搭建。 问题:加载不出子应用 #2979

Open
morepowerful opened this issue Jun 28, 2024 · 12 comments

Comments

@morepowerful
Copy link

morepowerful commented Jun 28, 2024

image

主应用代码如下(手动加载子应用):
image
image

子应用主要代码如下:
image
image
image
image

demo 仓库:https://github.com/morepowerful/qiankun-umi-demo

@gongshun
Copy link
Collaborator

gongshun commented Jul 1, 2024

看着像子应用加载了,但是没有渲染任何路由,entry只是为了拿子应用的html,而不是指定加载的路由页面

@morepowerful
Copy link
Author

看着像子应用加载了,但是没有渲染任何路由,entry只是为了拿子应用的html,而不是指定加载的路由页面

是的大佬,加载啦子应用html,但是没有加载对应路由,对应的路由代码没有执行。知道为什么吗?

@gongshun
Copy link
Collaborator

gongshun commented Jul 1, 2024

看着像子应用加载了,但是没有渲染任何路由,entry只是为了拿子应用的html,而不是指定加载的路由页面

是的大佬,加载啦子应用html,但是没有加载对应路由,对应的路由代码没有执行。知道为什么吗?

因为路由不匹配。举个例子,你的 activeRule 是 /app1,然后子应用的entry是 http://localhost:8080/ ,你想加载子应用的 /page1 页面,那么主应用需要跳转到 /app1/page1 子应用才会加载 /page1 页面

@morepowerful
Copy link
Author

看着像子应用加载了,但是没有渲染任何路由,entry只是为了拿子应用的html,而不是指定加载的路由页面

是的大佬,加载啦子应用html,但是没有加载对应路由,对应的路由代码没有执行。知道为什么吗?

因为路由不匹配。举个例子,你的 activeRule 是 /app1,然后子应用的entry是 http://localhost:8080/ ,你想加载子应用的 /page1 页面,那么主应用需要跳转到 /app1/page1 子应用才会加载 /page1 页面

大佬,因为业务的问题,我们不是通过url路由触发访问,而是手动触发加载子应用的。这种情况怎么处理能加载子应用对应的路由?还请告知
image

@gongshun
Copy link
Collaborator

gongshun commented Jul 1, 2024

与手动加载还是register无关,只与子应用的路由模式有关。例如,子应用是history 路由,手动加载子应用时,主应用的路由页面为 /main-page,然后想加载子应用的 /child-page 路由,那么主应用应该跳转到 /main-page/child-page 路由,子应用需要配置路由base为 /main-page (umi-plugin-qiankun已处理)

@morepowerful
Copy link
Author

与手动加载还是register无关,只与子应用的路由模式有关。例如,子应用是history 路由,手动加载子应用时,主应用的路由页面为 /main-page,然后想加载子应用的 /child-page 路由,那么主应用应该跳转到 /main-page/child-page 路由,子应用需要配置路由base为 /main-page (umi-plugin-qiankun已处理)

嗯,大佬我理解你的意思,但是现在我们业务比如说:主应用当前路由是/main-page(不想在变更啦),我想在这个主应用下加载/main-page/1和/main-page/2这两个子应用,怎么做到呢(本来想的是通过loadMicroApp去加载,但似乎不行,loadMicroApp只是去加载html,加载什么子应用还是需要路由变更去触发)?还请大佬指点

@morepowerful
Copy link
Author

与手动加载还是register无关,只与子应用的路由模式有关。例如,子应用是history 路由,手动加载子应用时,主应用的路由页面为 /main-page,然后想加载子应用的 /child-page 路由,那么主应用应该跳转到 /main-page/child-page 路由,子应用需要配置路由base为 /main-page (umi-plugin-qiankun已处理)

嗯,大佬我理解你的意思,但是现在我们业务比如说:主应用当前路由是/main-page(不想在变更啦),我想在这个主应用下加载/main-page/1和/main-page/2这两个子应用,怎么做到呢(本来想的是通过loadMicroApp去加载,但似乎不行,loadMicroApp只是去加载html,加载什么子应用还是需要路由变更去触发)?还请大佬指点

并且这两个子应用是在一个umi搭建的仓库里

@gongshun
Copy link
Collaborator

gongshun commented Jul 1, 2024

与手动加载还是register无关,只与子应用的路由模式有关。例如,子应用是history 路由,手动加载子应用时,主应用的路由页面为 /main-page,然后想加载子应用的 /child-page 路由,那么主应用应该跳转到 /main-page/child-page 路由,子应用需要配置路由base为 /main-page (umi-plugin-qiankun已处理)

嗯,大佬我理解你的意思,但是现在我们业务比如说:主应用当前路由是/main-page(不想在变更啦),我想在这个主应用下加载/main-page/1和/main-page/2这两个子应用,怎么做到呢(本来想的是通过loadMicroApp去加载,但似乎不行,loadMicroApp只是去加载html,加载什么子应用还是需要路由变更去触发)?还请大佬指点

并且这两个子应用是在一个umi搭建的仓库里

react 应用支持 memory 路由,不过需要主应用通知子应用跳转到对应路由页面

@morepowerful
Copy link
Author

与手动加载还是register无关,只与子应用的路由模式有关。例如,子应用是history 路由,手动加载子应用时,主应用的路由页面为 /main-page,然后想加载子应用的 /child-page 路由,那么主应用应该跳转到 /main-page/child-page 路由,子应用需要配置路由base为 /main-page (umi-plugin-qiankun已处理)

嗯,大佬我理解你的意思,但是现在我们业务比如说:主应用当前路由是/main-page(不想在变更啦),我想在这个主应用下加载/main-page/1和/main-page/2这两个子应用,怎么做到呢(本来想的是通过loadMicroApp去加载,但似乎不行,loadMicroApp只是去加载html,加载什么子应用还是需要路由变更去触发)?还请大佬指点

并且这两个子应用是在一个umi搭建的仓库里

react 应用支持 memory 路由,不过需要主应用通知子应用跳转到对应路由页面

我的主应用是vue,子应用是react,qiankun支持相关的vue组件加载子应用吗?

@morepowerful
Copy link
Author

与手动加载还是register无关,只与子应用的路由模式有关。例如,子应用是history 路由,手动加载子应用时,主应用的路由页面为 /main-page,然后想加载子应用的 /child-page 路由,那么主应用应该跳转到 /main-page/child-page 路由,子应用需要配置路由base为 /main-page (umi-plugin-qiankun已处理)

嗯,大佬我理解你的意思,但是现在我们业务比如说:主应用当前路由是/main-page(不想在变更啦),我想在这个主应用下加载/main-page/1和/main-page/2这两个子应用,怎么做到呢(本来想的是通过loadMicroApp去加载,但似乎不行,loadMicroApp只是去加载html,加载什么子应用还是需要路由变更去触发)?还请大佬指点

并且这两个子应用是在一个umi搭建的仓库里

react 应用支持 memory 路由,不过需要主应用通知子应用跳转到对应路由页面

我的主应用是vue,子应用是react,qiankun支持相关的vue组件加载子应用吗?

或者qiankun有提供什么api,再子应用的bootstrap这个周期里,开发者能选择mount什么路由吗?

@gongshun
Copy link
Collaborator

gongshun commented Jul 1, 2024

或者qiankun有提供什么api,再子应用的bootstrap这个周期里,开发者能选择mount什么路由吗?

主子应用配合就好了呀,主应用通过props给子应用传递路由模式

@morepowerful
Copy link
Author

或者qiankun有提供什么api,再子应用的bootstrap这个周期里,开发者能选择mount什么路由吗?

主子应用配合就好了呀,主应用通过props给子应用传递路由模式

大佬能给个demo指导下吗。实在有点迷糊🙏

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

No branches or pull requests

2 participants