qiankun微前端路由模式

爱被打了一巴掌 2021-09-18 06:16 613阅读 0赞

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

### 一、主应用是hash模式 ###

*  说明
    
     *  当主应用是 hash 模式时，一般微应用也是 hash 模式。主应用的一级 hash 路径会分配给对应的微应用（比如 `#/base1` ），此时微应用如果需要在 base 路径的基础上进行 hash 模式下的二级路径跳转（比如 `#/base1/child1` ），这个场景在当前 VueRouter 的实现方式下需要自己手动实现，给所有路由都添加一个前缀即可。VueRouter 的 hash 模式下的 base 参数[不支持添加 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 配置:不用添加前缀`#/`  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgyNTM4OQ_size_16_color_FFFFFF_t_70_pic_center]
     *  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.][-20201027153817649.]
 *  路由效果图  
    ![20201027155714268][]

[hash _ base]: https://github.com/vuejs/vue-router/blob/dev/src/index.js#L55-L69
[20201027143922744.png]: /images/20210918/525315236b864e01af21f584fc3865d3.png
[20201027144212715.png]: /images/20210918/ba4ab20c4c754497a0b95945b744ec33.png
[20201027150321709]: /images/20210918/f3a7a73a79124eca8a60104c16a0a8f3.png
[base]: https://router.vuejs.org/zh/api/#base
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgyNTM4OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20210918/073c6bf3124b48feaf261051eaae3f42.png
[20201027151158696]: /images/20210918/bbfe5953609042e58332c90a980f6ecd.png
[20201027151425486.]: /images/20210918/a38fe947f9ba4c5abe540e4f0cbbf808.png
[20201027151758830]: /images/20210918/002a375be26c4eae9aa7f0779b6a12c1.png
[20201027152138732]: /images/20210918/fb730740072b43288bbefa7831c8861b.png
[20201027152220115.]: /images/20210918/b6245da628994cd3b4739522d38e87d0.png
[20201027155441067]: /images/20210918/fc89a235a96e4052a33c547fde57e9f9.png
[-20201027153817649.]: /images/20210918/b5e2c9e9b29c4cc4a713c8a58acf07eb.png
[20201027155714268]: /images/20210918/089d5678a65845188a50a442c983177b.png