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