qiankun在vue框架下history 和hash路由模式的使用

一、主应用是hash模式

  • 说明

    • 当主应用是 hash 模式时,一般微应用也是 hash 模式。主应用的一级 hash 路径会分配给对应的微应用(比如 #/base1 ),此时微应用如果需要在 base 路径的基础上进行 hash 模式下的二级路径跳转(比如 #/base1/child1 ),这个场景在当前 VueRouter 的实现方式下需要自己手动实现,给所有路由都添加一个前缀即可。VueRouter 的 hash 模式下的 base 参数不支持添加 hash 路径 base
    • 当主应用是 hash 模式时,微应用history模式时,我尝试了下,跳转出现各种bug问题,这里不展示了。
  • 下面展示:主应用hash模式 + 微应用history模式

  • 主应用配置 :hash模式

    • router/index.js (路由配置)
    // 一般hash模式下,不通过base:"/vue"这样添加前缀
    const router = new VueRouter({
      // mode: 'history', 
      mode: 'hash',
      base: process.env.BASE_URL,
      routes
    })
    
    • main.js 配置:
      • qiankun 主应用根据 activeRule 配置激活对应微应用
      • 激活路由需要添加#/前缀
        20201027143922744.png
  • 子级vue应用配置:hash模式

    • 需要在每个路由里面添加激活前缀/vue
    • 注意这里不能加 #/vue这个前缀,前缀跟主应用的激活路由匹配20201027144212715.png
  • 路由效果图20201027150321709

二、主应用是history模式

  • 说明:当主应用是 history 模式且微应用也是 hash模式时,表现完美。如果微应用需要添加 base 路径,设置子项目的 base 属性即可。

  • 代码示例:主应用history模式 + 微应用hash模式

    • 主应用配置:history模式

    • main.js 配置:不用添加前缀#/
      在这里插入图片描述

    • router/index.js配置
      20201027151158696

    • 微应用vue配置:hash模式
      20201027151425486.

    • 路由效果图:
      20201027151758830

  • 说明:当主应用是 history 模式,微应用是 history 模式,表现完美。(条件允许推荐使用)

  • 代码示例:应用是history 模式 + 微应用 history 模式

    • 主应用配置:history模式
      20201027152138732
    • router/index.js配置
      20201027152220115.
  • 微应用vue配置:history模式

    • history 模式下可用base:’/vue’ 添加激活前缀
      20201027155441067
  • 不使用base添加激活前缀,手动添加
    -20201027153817649.

  • 路由效果图
    20201027155714268

Logo

前往低代码交流专区

更多推荐