问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

乾坤微前端如何实现子路由切换？

头像
小飞
    50622

    乾坤中子路由如何切换？

    主应用中加载子应用 image.png
    主应用中的路由 image.png
    子应用中的路由image.png
    其中子应用的第一个页面能正常加载，但是在子应用中路由如何切换呢，例如我想跳转到about ，不管是'/about' 还是/kx-dog-web/about都无法正常加载出子应用。

    qiankun前端架构
    阅读 772
    avatarAI BotBETA

    在乾坤微前端中实现子应用路由切换，需要确保主应用路由、子应用路由和乾坤的路由劫持机制正确配合。以下是解决方案：

    1. 主应用配置路由（关键）

    主应用需使用通配符路由匹配子应用的所有路径，确保路由穿透：

    // 主应用 router.js
const routes = [
  {
    path: '/kx-dog-web*',  // 重点：使用通配符*
    component: Layout,
    children: [{
      path: '',
      component: () => import('../micro-app/KxDogWeb')
    }]
  }
]

    2. 子应用路由配置要点

    基础路径（base）设置

    子应用必须根据乾坤的环境变量动态设置路由 base：

    // 子应用 router.js（Vue示例）
let basePath = '/';
if (window.__POWERED_BY_QIANKUN__) {
  basePath = '/kx-dog-web'; // 必须与主应用的激活路径一致
}

const router = new VueRouter({
  mode: 'history',
  base: basePath,  // 动态注入基础路径
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About } // 子路由
  ]
})

    React 子应用示例：

    // React子应用设置basename
<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/kx-dog-web' : '/'}>
  <App />
</BrowserRouter>

    3. 乾坤注册配置

    主应用注册子应用时，确保 activeRule 匹配基础路径：

    // 主应用注册子应用
registerMicroApps([
  {
    name: 'kx-dog-web',
    entry: '//localhost:7100',
    container: '#subapp',
    activeRule: '/kx-dog-web',  // 必须与子应用base一致
    props: { basePath: '/kx-dog-web' } // 可传递路径参数给子应用
  }
]);

    4. 子应用内部路由跳转

    直接使用框架路由方法，无需手动拼接路径：

    <!-- 子应用中的导航链接 -->
<router-link to="/about">关于</router-link> 

<!-- 或编程式导航 -->
<button @click="$router.push('/about')">跳转</button>

    乾坤会自动将 /about 识别为完整路径 /kx-dog-web/about

    5. 常见问题排查点

    • 🔍 路径一致性：主应用 activeRule、子应用 base 是否完全一致（注意大小写）

    • ⚠️ 404问题：确保主应用服务器配置（如Nginx）支持history模式：

      location / {
  try_files $uri $uri/ /index.html;
}

    • 🚦 开发环境跨域：子应用devServer需设置头部：

      headers: {
  'Access-Control-Allow-Origin': '*'
}

    路由切换原理图解

    主应用路由: /kx-dog-web* → 乾坤拦截 → 挂载子应用
                        ↓
子应用接收: 获取当前路径/kx-dog-web/about → 截取基础路径 → 渲染/about路由组件
    💡 关键原则：子应用的路由系统是独立运行的，乾坤通过URL路径前缀隔离各子应用的路由空间。当路径改变时，乾坤会根据activeRule判断是否激活对应子应用，子应用内部则根据剩余路径进行路由匹配。
    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题