umijs / qiankun

📦 🚀 Blazing fast, simple and complete solution for micro frontends.
https://qiankun.umijs.org
MIT License
15.58k stars 2k forks source link

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

Open morepowerful opened 1 week ago

morepowerful commented 1 week ago
image

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

image image

子应用主要代码如下:

image image image image

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

gongshun commented 1 week ago

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

morepowerful commented 1 week ago

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

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

gongshun commented 6 days ago

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

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

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

morepowerful commented 6 days ago

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

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

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

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

image
gongshun commented 6 days ago

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

morepowerful commented 6 days ago

与手动加载还是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 commented 6 days ago

与手动加载还是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 commented 6 days ago

与手动加载还是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 commented 6 days ago

与手动加载还是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 commented 6 days ago

与手动加载还是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 commented 6 days ago

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

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

morepowerful commented 6 days ago

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

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

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