• 周一. 8月 15th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

qiankunjs中vue路由使用hash模式

admin

11月 28, 2021

为什么使用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

image

发表回复

您的电子邮箱地址不会被公开。