vue3+vite使用qiankun加载子项目路由,前端代码片段如下: registerMicroApps中: { name: "ems-sl-drill", entry: "http://192.168.200.166/subapp/", //子应用1访问地址 activeRule: "/subapp", container: "#child-app", //在主应用中的挂载节点 props: { routerBase: "/subapp", sandbox: { strictStyleIsolation: true }, } }, AppMain.vue 文件如下: <section class="app-main"> <router-view v-slot="{ Component, route }"> <transition name="router-fade" mode="out-in"> <keep-alive :include="tagsViewStore.cachedViews"> <component :is="Component" :key="route.fullPath" /> </keep-alive> </transition> </router-view> </section> router.ts文件如下: { path: "/redirect", component: Layout, meta: { hidden: true }, children: [ { path: "/redirect/:path(.*)", component: () => import("@/views/redirect/index.vue"), }, ], }, { path: "/login", component: () => import("@/views/login/index.vue"), meta: { hidden: true }, }, { path: "/subapp*", component: () => import("@/views/subApp/subAppContainer.vue"), }, { path: "/", component: Layout, redirect: "/planTemplate", children: [ { path: "401", component: () => import("@/views/error-page/401.vue"), meta: { hidden: true }, }, { path: "404", component: () => import("@/views/error-page/404.vue"), meta: { hidden: true }, }, ], }, 当访问主项目菜单路由时是地址为这种格式: http://localhost:3000/#/planTemplate,而在访问子项目菜单时是:http://localhost:3000/subapp/#/planTemplate1的格式,如何处理。
时间: 2025-07-06 14:40:18 浏览: 4
<think>好的,我需要解决用户在Vue3+Vite项目中,使用Qiankun加载子应用时遇到的路由格式不一致的问题。主应用访问时路径是`http://localhost:3000/#/planTemplate`,而子应用访问时变成了`http://localhost:3000/subapp/#/planTemplate1`。用户希望统一处理这两种情况,确保路由正确加载。
首先,我需要回忆Qiankun的配置和路由机制。Qiankun通过`activeRule`来匹配子应用的激活路径。用户当前的配置中,子应用的`activeRule`是`/subapp`,这意味着当主应用的路径以`/subapp`开头时,子应用会被加载。不过,用户的主应用使用的是hash路由,子应用可能也用了hash模式,导致路径中出现两个`#`,比如`/subapp#/planTemplate1`。但实际显示的URL是`http://localhost:3000/subapp/#/planTemplate1`,这说明可能子应用配置有问题,或者主应用的路由配置需要调整。
接下来,主应用的路由配置中有一个`/subapp*`的路由,指向一个容器组件`subAppContainer.vue`。这个容器组件应该用来挂载子应用。但根据Qiankun的文档,子应用应该通过Qiankun的生命周期钩子来挂载到指定的容器,而不是通过主应用的路由组件。这可能意味着主应用的路由配置和Qiankun的配置存在冲突,导致子应用加载时路径处理不正确。
然后,考虑路由模式。主应用使用的是hash路由,因为URL中有`#`。而子应用如果也使用hash路由,在集成时可能会出现路径问题。需要确保主应用和子应用的路由模式兼容。通常,主应用使用hash路由,子应用也建议使用hash路由,避免浏览器刷新时出现404问题。不过,当主应用有基础路径`/subapp`时,子应用需要正确设置`publicPath`和路由的base参数。
另外,检查子应用的打包配置。在Vite项目中,子应用需要配置base为`/subapp/`,并且启用umd格式的打包,以支持Qiankun的加载。同时,子应用的路由实例需要根据主应用传递的`routerBase`来设置base参数,比如`createWebHashHistory(routerBase)`。
还可能存在的问题是主应用的路由拦截。主应用中的`/subapp*`路由可能会捕获所有以`/subapp`开头的路径,导致Qiankun无法正确激活子应用。因此,可能需要移除主应用中的这个路由配置,完全依赖Qiankun的`activeRule`来激活子应用。
最后,考虑子应用的路由跳转是否正确处理了基础路径。子应用内部的路由跳转需要基于`routerBase`,或者使用绝对路径,确保路径正确拼接主应用的基础路径。
总结可能的解决步骤:调整主应用路由配置,移除`/subapp*`的路由;确保子应用配置正确的base和publicPath;在子应用的路由中根据主应用传递的routerBase设置base;检查Qiankun的配置,确保activeRule和子应用的路径匹配正确。</think>根据您的配置和路由模式,需要从路由配置和Qiankun参数传递两个层面进行调整。以下是分步解决方案:
---
### 一、主应用路由配置调整
```typescript
// 移除原有/subapp*路由(会产生冲突)
// 修改为兜底404路由(必须放在最后)
{
path: "/:catchAll(.*)",
component: () => import("@/views/error-page/404.vue"),
meta: { hidden: true }
}
```
*原因*:Qiankun通过`activeRule`接管路由控制,主应用路由表声明`/subapp*`会导致路由劫持冲突
---
### 二、Qiankun配置增强
```typescript
// 注册子应用时增加路由感知
registerMicroApps([
{
name: "ems-sl-drill",
entry: "http://192.168.200.166/subapp/",
activeRule: (location) => location.pathname.startsWith('/subapp'),
container: "#child-app",
props: {
// 显式传递子应用路由基准路径
routerBase: "/subapp",
// 同步主应用路由状态
mainRouter: router,
sandbox: { strictStyleIsolation: true }
}
}
]);
```
*关键点*:使用函数式`activeRule`确保精确匹配,传递主应用路由实例
---
### 三、子应用改造步骤
#### 1. 路由初始化改造
```typescript
// 子应用路由配置(必须使用hash模式)
let basePath = window.__POWERED_BY_QIANKUN__ ? '/subapp' : '/';
const router = createRouter({
history: createWebHashHistory(basePath),
routes
});
```
#### 2. 生命周期适配
```javascript
// 子应用入口导出qiankun生命周期
let routerInstance = null;
export async function mount(props) {
// 接收主应用路由基准
basePath = props.routerBase || '/';
routerInstance = createRouter({/* 使用新basePath */});
render({ router: routerInstance });
}
export async function unmount() {
routerInstance = null;
}
```
#### 3. Vite配置
```javascript
// vite.config.js
export default defineConfig({
base: '/subapp/',
build: {
rollupOptions: {
output: {
format: 'umd' // 必须使用UMD格式
}
}
}
});
```
---
### 四、路由跳转规范
#### 主应用跳转子应用:
```javascript
// 使用完整路径格式
router.push('/subapp/#/planTemplate1');
// 或通过qiankun通信
import { initGlobalState } from 'qiankun';
const actions = initGlobalState({});
actions.setGlobalState({ navigate: '/planTemplate1' });
```
#### 子应用内部跳转:
```javascript
// 必须使用相对路径
router.push('detail'); // 自动补全为 /subapp/#/detail
```
---
### 五、部署注意事项
1. 子应用必须支持跨域访问(配置CORS)
2. 子应用静态资源路径必须使用绝对路径(通过vite的`base`配置)
3. 主应用Nginx需配置`/subapp/`路径的反向代理
---
**最终路由表现形式**:
- 主应用路由:`http://host/#/mainRoute`
- 子应用路由:`http://host/subapp/#/childRoute`
**原理说明**:通过Qiankun的路由劫持能力,当检测到`/subapp`路径前缀时,将渲染权交给子应用,子应用基于接收到的`routerBase`参数构建独立路由空间,同时保持与主应用路由模式的一致性。
阅读全文
相关推荐











