# vue-qiankun-helper

**Repository Path**: xiangshanxiumu/vue-qiankun-helper

## Basic Information

- **Project Name**: vue-qiankun-helper
- **Description**: vue接入qiankun微前端辅助处理插件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-08
- **Last Updated**: 2023-07-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, qiankun, 微前端辅助插件

## README

# vue-qiankun-helper

### 介绍
>vue接入qiankun微前端辅助处理工具，主要是针对主子应用hash/history两种模式路由处理，使用时建议主子应用路由模式保持一致。

### 安装教程
```bash
  npm i vue-qiankun-helper -S
```

### 使用说明
| MainApp | MicroApp|
|:-----|:-----|
|getHistoryModeActiveRule|getMicroAppHashModeRoutes|
|getHashModeActiveRule |getMicroAppRoutesByRouteMode |
|getMicroAppActiveRuleByRouteMode  |
|addMicroRoutesToMainRoute   |

##### 主应用微前端相关路由辅助处理方法
- getMicroAppActiveRuleByRouteMode
>主应用工程环境下 根据当前路由模式计算注册微应用的激活路由（微应用注册前使用）
```ts
import {MainApp, getMicroAppActiveRuleByRouteMode} from "vue-qiankun-helper";

let microApps = getMicroAppActiveRuleByRouteMode(routeMode, microApps);
// or
let microApps = MainApp.getMicroAppActiveRuleByRouteMode(routeMode, microApps);
```
- addMicroRoutesToMainRoute
>主应用工程环境下 添加子路由到主应用路由里面（微应用注册前使用）
```ts
import {MainApp, addMicroRoutesToMainRoute} from "vue-qiankun-helper";

addMicroRoutesToMainRoute(parentPath,mainRoutes,microRoutes);
// or
MainApp.addMicroRoutesToMainRoute(parentPath,mainRoutes,microRoutes);
```
---------------------------------------------------------------------------------------------

##### 子应用微前端相关路由辅助处理方法
- getMicroAppRoutesByRouteMode
>在子应用工程环境下 根据当前路由模式重新计算子应用路由（微应用注册前使用）
```ts
import {MicroApp, getMicroAppRoutesByRouteMode} from "vue-qiankun-helper";

let microAppRoutes = getMicroAppRoutesByRouteMode(routes, appName, routeMode, microAppContainer);
// or
let microAppRoutes = MicroApp.getMicroAppRoutesByRouteMode(routes, appName, routeMode, microAppContainer);
```