qiankun+vue，為什麼我的子應用的子路由老是跳404？這麼解決

• 2022 年 10 月 12 日
• 筆記

主要解決子應用內部跳轉路由時，跳到404頁的問題

• 你能搜這個，我姑且認為你基本配置已經好了，而且主跳子的一級路由是正常的，請往下看
• 忘說了，我的主應用和子應用都是Vue

主應用跳子應用都正常，為什麼子應用跳子路由就會404？注意這三點

• 主應用中，你配置子應用路由的地方

  {
    name: 'micro app',
    entry: '//localhost:8080',
    container: '#microContainer',
    activeRule: '/micro-app' // 記住它，姑且叫它【張三】
  }

• 主應用的router.js(或者router.ts)

      {
        path: '/micro-app/', // 跟張三一致
        component: layout,
        name: 'platform',
        meta: {...},
        children: [
          {
            path: ':pathMatch(.*)', // 這個表示在張三下的所有路由均有效【關鍵】，注意vue2和vue3配置名稱不同，請自行百度
            component: MicroApp, // 你需要封裝一個組件，裏面就放個<div id="#microContainer"></div>，用於顯示子應用頁面
            name: 'children',
            meta: {...},
          }
        ]
      }

• 最後看看你的子應用的router.js(或者router.ts)的模式中設置的路由前置

history: createWebHistory('/micro-app') //括號里一依舊是張三，注意vue2和vue3配置方法不同，請自行百度

• 好了，再試試？