qiankunjs中vue路由使用hash模式

為什么使用hash模式

1. 官網上舉例都是拿history模式，我就想看看hash模式
2. history模式優在編譯后缺點
   file協議訪問會白屏，即打包完成后，雙擊頁面會白屏（之后還證明qiankun的微應用，即使在hash模式下，子模塊也不支持file模式訪問依舊白屏）
   http協議訪問刷新也同樣白屏，如果想解決則部署到服務器還需要特殊配置
   因為我使用的是webapp（cordova技術），並沒有部署到服務器，所有資源均走本地，所以沒法使用history模式

參考文檔

qiankun微前端路由模式

如何去做？

主應用

修改注冊子應用的activeRule
改成hash模式，比如 講'/workbench'改為'#/workbench'

import { registerMicroApps, start } from 'qiankun';
export const useQiankun = () => {
    registerMicroApps([
        {
            name: 'workbenchApp',
            entry: '//localhost:8080', //如果是編譯后部署，則這里應該為編譯后的子應用訪問地址，比如'./micro-workbench-dist/index.html'
            container: '#wk_container',
            activeRule: '#/workbench', // 改成hash模式規則
        }
    ]);
    start(); // 啟動 qiankun
}

子應用（workbench 工作台模塊）

子應用就需要硬編碼，有損改造了。
給原來的路由加上模式改為hash && 前綴 && 跳轉的時候動用全局路由首位輔助處理跳轉
注意不要妄圖使用base偷懶，親測無效

let prefix = '';
if(window.__POWERED_BY_QIANKUN__){
  prefix = '/workbench' // /workbench為主應用的activeRule
}

const routes: Array<RouteConfig> = [
  {
    path: prefix+'/',
    name: 'home',
    component: Home
  },
  {
    path: prefix+'/coordinate',
    name: 'coordinate',
    component: Coordinate
  }
]
const router = new VueRouter({
  mode: 'hash',
  routes
});

// 這里主要是適配子應用的單獨訪問和繼承訪問
if(window.__POWERED_BY_QIANKUN__){
  router.beforeEach((to, from, next) => { 
    if(!to.path.includes('/workbench')){ // /workbench為主應用的activeRule
      next({path: prefix+to.path})
    }else{next()}
  })
}

這里注意，盡量主應用和子應用的路由模式保持一直

效果預覽

其中workbench是子應用

完整demo