最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

{
name: ‘app1’,
entry: ‘http://localhost:8080’,
container: ‘#container’,
activeRule: ‘/portal/app1’,
},
]);

3. 在这个路由组件的 ngAfterViewInit 周期调用 start 函数，注意不要重复调用。

import { start } from ‘qiankun’;
export class PortalComponent implements AfterViewInit {
ngAfterViewInit(): void {
if (!window.qiankunStarted) {
window.qiankunStarted = true;
start();
}
}
}

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


![在这里插入图片描述](https://img-blog.csdnimg.cn/3586b81af5734082aa761e35adf24223.png)


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


**说明:**



> 
> 当`主应用是 hash 模式时`，一般`微应用也是 hash 模式`。主应用的一级 hash 路径会分配给对应的微应用（比如 `#/base1` ），此时微应用如果需要在 base 路径的基础上进行 hash 模式下的二级路径跳转（比如 `#/base1/child1` ），这个场景在当前 VueRouter 的实现方式下需要自己手动实现，给所有路由都添加一个前缀即可。VueRouter 的 hash 模式下的 base 参数不支持添加 hash 路径 base。
> 
> 
> 



> 
> 当主应用是 hash 模式时，微应用history模式时，我尝试了下，跳转出现各种bug问题，这里不展示了。
> 
> 
> 


**下面展示：** 主应用`hash模式` + 微应用`hash模式`


**主应用配置 ：** `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` 配置激活对应微应用  
>  激活路由需要添加`#/`前缀  
>  ![在这里插入图片描述](https://img-blog.csdnimg.cn/07d3a1018b5d4cccb4a503e4eec7a4d6.png)
> 
> 
> 


* 子级vue应用配置：`hash模式`



> 
> 需要在每个路由里面添加激活前缀`/vue`  
>  **注意:** 这里不能加 `#/vue`这个前缀，前缀跟主应用的激活路由匹配  
>  ![在这里插入图片描述](https://img-blog.csdnimg.cn/34ee5daf6d184b77ae35a1dcf16cec34.png)  
>  **效果图**  
>  ![在这里插入图片描述](https://img-blog.csdnimg.cn/39b674b57a1a4ce085d8815a86aeaceb.png)
> 
> 
> 


##### 二、主应用是history模式


**说明：**



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


**代码示例：** 主应用`history模式` + 微应用`hash模式`


**主应用配置：** `history模式`


* main.js 配置:



> 
> 不用添加前缀`#/`![在这里插入图片描述](https://img-blog.csdnimg.cn/40b745615dbe49058cbbe96ca611e0d8.png)
> 
> 
> 


* router/index.js配置



> 
> ![在这里插入图片描述](https://img-blog.csdnimg.cn/f0d60b5e4c9940d38c5a95de50bcd356.png)
> 
> 
> 


* 微应用vue配置：`hash模式`



> 
> ![在这里插入图片描述](https://img-blog.csdnimg.cn/e6844bb4dd1142e69a54f814f81e5cb2.png)
> 
> 
> 



> 
> **路由效果图：**  
>  ![在这里插入图片描述](https://img-blog.csdnimg.cn/0e10caaad7514e8c87814c365de9d664.png)
> 
> 
> 


**说明：**



> 
> `当主应用是 history 模式，微应用是 history 模式`，表现完美。（条件允许推荐使用）
> 
> 
> 


**代码示例：** 应用是`history 模式` + 微应用 `history 模式`


**主应用配置：** `history模式`



> 
> ![在这里插入图片描述](https://img-blog.csdnimg.cn/d3605775a5d145509de4984017de5646.png)
> 
> 
> 


* router/index.js配置



> 
> ![在这里插入图片描述](https://img-blog.csdnimg.cn/2ac063fd122f43c28bfa10706187d486.png)
> 
> 
> 


### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**给大家分享一些关于HTML的面试题。**

![](https://img-blog.csdnimg.cn/img_convert/83e5c2fb657636f69e76e402a83ac6d7.webp?x-oss-process=image/format,png)
![](https://img-blog.csdnimg.cn/img_convert/3352602a0c225e2b2484e46e9055f299.webp?x-oss-process=image/format,png)





 
> 


### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**给大家分享一些关于HTML的面试题。**

[外链图片转存中...(img-oEMHk9iz-1715155853933)]
[外链图片转存中...(img-v7qxQRiU-1715155853934)]