{ path: 'portal', component: PortalComponent, children: [{ path: '**', component: EmptyComponent }], }, ];
2. 微应用的 activeRule 需要包含主应用的这个路由 path。
registerMicroApps([ { 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`路由模式的使用
##### 一、主应用是`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` 配置激活对应微应用
> 激活路由需要添加`#/`前缀
> 
>
>
>
* 子级vue应用配置：`hash模式`
>
> 需要在每个路由里面添加激活前缀`/vue`
> **注意:** 这里不能加 `#/vue`这个前缀，前缀跟主应用的激活路由匹配
> 
> **效果图**
> 
>
>
>
##### 二、主应用是history模式
**说明：**
>
> 当主应用是 history 模式且微应用也是 hash模式时，表现完美。如果微应用需要添加 base 路径，设置子项目的 base 属性即可。
>
>
>
**代码示例：** 主应用`history模式` + 微应用`hash模式`
**主应用配置：** `history模式`
* main.js 配置:
>
> 不用添加前缀`#/`
>
>
>
* router/index.js配置
>
> 
>
>
>
* 微应用vue配置：`hash模式`
>
> 
>
>
>
>
> **路由效果图：**
> 
>
>
>
**说明：**
>
> `当主应用是 history 模式，微应用是 history 模式`，表现完美。（条件允许推荐使用）
>
>
>
**代码示例：** 应用是`history 模式` + 微应用 `history 模式`
**主应用配置：** `history模式`
>
> 
>
>
>
* router/index.js配置
>
> 
>
>
>
* 微应用vue配置：`history模式`
>
> history 模式下可用`base:’/vue’` 添加激活前缀
> 
>
>
>
>
> 不使用base添加激活前缀，手动添加
> 
>
>
最后
--
> 最后写上我自己一直喜欢的一句名言：`世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它`
> 
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
