qiankun微前端库-路由模式选择

在 Qiankun 微前端架构中，路由模式的选择对应用的体验和稳定性至关重要。Qiankun 主要支持两种路由模式：Hash 模式和History 模式。以下是两者的详细对比和选择建议：

1. Hash 模式

原理：

• 使用 URL 的哈希部分（# 后的内容）作为路由标识。例如：

http://localhost:3000/#/subapp/page

• 哈希变化不会触发页面刷新，适合单页应用（SPA）。

优点	缺点
兼容性好（支持 IE9+）	URL 不够美观（哈希符号可能对某些团队不友好）
无需服务器配置	SEO 不友好（搜索引擎爬虫通常忽略哈希部分）

适用场景：

• 需要兼容旧浏览器（如 IE）。
• 服务器配置简单，不愿处理复杂的 404 重定向。
• 项目对 URL 美观性要求不高，优先考虑开发便捷性。 

2. History 模式

原理：

• 利用 HTML5 的 pushState 和 replaceState 改变 URL，无需哈希符号。例如：

http://localhost:3000/subapp/page

• 优势在于 URL 更简洁，但需要服务器配合处理路由。

优点	缺点
URL 更简洁美观，SEO 友好	需要服务器配置（所有路由均需指向主应用入口文件，否则刷新会 404）。

适用场景：

• 项目需要 SEO 支持或现代化的 URL 体验。
• 服务器可以灵活配置（如 Nginx 或 Node.js 中央路由）。
• 团队技术栈支持 HTML5 History API。

一、主应用路由模式与微应用路由模式组合

1. ‌主应用为 history 模式‌

   • ‌微应用为 history 模式‌

     • 需在微应用路由配置中设置 base 路径，与主应用的 activeRule 保持一致，实现路径嵌套‌。
     • ‌优势‌：支持 SEO，路由跳转自然（如 /main-app/child-app/page1）‌。
     • ‌示例‌：

       // 主应用注册微应用
       registerMicroApps([{
         name: 'vue-child',
         entry: '//localhost:8081',
         container: '#child-container',
         activeRule: '/child/app'  // 主应用路径规则
       }]);
       
       // 微应用路由配置（Vue）
       const router = new VueRouter({
         mode: 'history',
         base: window.__POWERED_BY_QIANKUN__ ? '/child/app' : '/', // 动态设置 base
         routes: [...]
       });
       

       微应用打包部署时需配置 publicPath 与 base 一致‌

   • ‌微应用为 hash 模式‌

     • 无需设置 base，主应用通过 activeRule 匹配微应用的 hash 路径，主应用路径 /main/app，微应用通过 #/page1 跳转，URL 显示为 /main/app/#/page1
     • ‌适用场景‌：需快速兼容旧项目或避免路径冲突‌。

2. ‌主应用为 hash 模式‌

   • ‌微应用为 hash 模式‌
     • 主应用的 activeRule 需包含 hash 前缀（如 #/child-app），微应用通过监听 hashchange 事件实现路由同步‌。
     • ‌缺点‌：URL 结构复杂（如 #/main-app/#/child-app/page1），且需手动处理路径前缀‌。

       // 主应用注册微应用
       registerMicroApps([{
         name: 'hash-child',
         entry: '//localhost:8082',
         activeRule: '#/child'  // 主应用 hash 路径规则
       }]);
       
       // 微应用路由配置（Vue）
       const router = new VueRouter({
         mode: 'hash',
         routes: [{
           path: '/child/page1',  // 手动添加前缀
           component: Page1
         }]
       });
       

   • ‌微应用为 history 模式‌
     • ‌不推荐‌：可能导致路由跳转混乱或白屏问题‌。

---

二、路由模式选择建议

1. ‌推荐组合‌

   • ‌主应用 history + 微应用 history‌
     • 路径清晰，兼容性强，适合新项目‌。
   • ‌主应用 history + 微应用 hash‌
     • 适合需快速接入旧项目且不希望修改路由逻辑的场景‌。

2. ‌不推荐组合‌

   • ‌主应用 hash + 微应用 history‌：路径冲突风险高，需额外处理路由同步‌。
   • ‌主应用 hash + 微应用 hash‌：URL 冗余复杂，维护成本高‌。

---

三、特殊场景处理

1. ‌动态路由配置‌

   • 主应用通过 activeRule 动态匹配微应用路径，微应用根据 window.__POWERED_BY_QIANKUN__ 判断运行环境，动态设置路由 base‌。

2. ‌跨域与路径同步‌

   • 若微应用独立部署，需配置 Access-Control-Allow-Origin 解决跨域问题，并通过 props 传递路由状态实现同步‌。

---

四、配置示例（主应用与微应用均为 history 模式）

1. ‌主应用配置

2. // 注册微应用 
   registerMicroApps([{ name: 'child-app',
    entry: '//localhost:8080', 
   container: '#container', 
   activeRule: '/child-app'// 与微应用路由 base 一致 }]);
   }]) 

3. ‌微应用配置‌

   // 路由配置 
   const router = new VueRouter({ 
   mode: 'history',
    base: window.__POWERED_BY_QIANKUN__ ? '/child-app' : '/', // 动态设置 base routes: [...] });

---

‌总结‌：优先选择主应用与微应用均为 history 模式的组合，通过动态 base 配置实现路径隔离；若需快速接入旧系统，可考虑主应用 history + 微应用 hash 模式‌。