前端微服務（qiankun）哈希路由實踐

最近公司搞前端微服務，用了qiankun這個庫，不得不說背靠輪子好乘涼啊~。

qiankun介紹戳這里  https://qiankun.umijs.org/zh

先看下效果

 

下面進入正題：

我的項目，技術棧都是vue，主應用擁有自己的公共模塊，同時需要以微應用方式嵌入業務模塊。大概如下圖所示

 

因為我主應用用的哈希路由，微應用參考官方demo用的都是history方式的路由，就導致路由變化比較蛋疼，比如現在有專門的路由#/micrApp來展示微應用，同時注冊了微應用dev，通過/dev方式跳轉：

從主應用的#/organ/manage路由切換到微應用/dev，url就會變成/dev/#/organ/manage，並且如果微應用上有router-link標簽跳轉如<router-link to="/about">，url就會變成/dev/about/#/organ/manage。

 

想要的結果，我理想的路由應該是微應用路由作為主應用路由的一部分，跳轉后應該是/#/mricrApp/dev和#/mricrApp/dev/about。

為了達到這種效果，需要進行以下改造：

1.修改微應用路由方式，改為哈希路由，同時增加路由判斷，當應用運行在qiankun里時，為所有路由和在路由跳轉前為跳轉路由path加上micrApp前綴。（圖中的packInfo.name就是微應用的項目名，這里是dev）

  

 

 

 2.修改主應用注冊應用時的路由匹配規則和增加主應用路由

修改規則 activeRule:'/dev'，改為 activeRule:'/#/micrApp/dev'。

增加路由，使得主應用對於/micrApp/dev和/micrApp/dev/about匹配到的是同一個路由組件

{
    path: `/micrApp/dev`,//匹配微應用跳轉
    component: () => import('@/views/prod/index'),
    name: 'dev',
    meta: { 
      title: '開發環境', 
      icon: 'jigou',
      isMicrApp:true,
    },
  },
  {
    path: `/micrApp/dev/:micrAppRoute`,//匹配微應用內的路由跳轉
    hidden:true,
    component: () => import('@/views/prod/index'),
    name: 'dev',
    meta: { 
      title:'開發環境',
      isMicrApp:true, 
    },
}

現在，當url變化時，首先會進入qiankun的匹配規則中，匹配到#/micrApp/dev時，會加載微應用到節點，同時，主應用的vue-router匹配到上述加的第一個路由后會跳轉到對應的路由組件；然后微應用的vue-router匹配后會展示相應的微應用路由。

當微應用內部的<router-link to="/about">被點擊時，首先子應用跳轉路由前會加上micrApp前綴，所以就是往/micrApp/dev/about跳轉，匹配到about路由；然后在主應用的vue-router中匹配到上圖中的第二個路由，保持路由為同一個路由組件。

 

以上。