# hzero-app

**Repository Path**: Java_in_action/hzero-app

## Basic Information

- **Project Name**: hzero-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-11-15
- **Last Updated**: 2025-11-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 多个 iframe  切换如何实现保留状态的 单页应用为前端。

<!-- ![img](./test.png) -->

## 安装依赖

```
yarn install
```


## 启动基座

```

cd packages/demo2
yarn start

# 微前端基座路由配置 packages/demo2/config/config.ts
# 微前端 子模块 app 配置： packages/demo2/src/micro-config.ts

```

## 启动子模块1

```

cd examples/sub-app2
yarn dev

```


## 启动子模块2

```

cd examples/sub-app3
yarn dev

```

## 依次访问父模块可以看到效果

```

- http://localhost:8002/app2/page3
- http://localhost:8002/app2/page4
- http://localhost:8002/app1/page1
- http://localhost:8002/app1/page2


```

## 测试路由状态保留

```

cd examples/test-qiankun-sub-app
yarn start

# 访问 http://localhost:8002/my-iframe/micro--umi-app 或 http://localhost:8002/my-iframe/http://localhost:7001 可以查看路由状态保留效果

```

## 通信

### 测试子模块调用父模块方法

```

# 访问： http://localhost:8002/my-iframe/micro--umi-app/home1

```


### 测试父模块调用子模块方法

```

# 访问 http://localhost:8002/app2/page3 可以查看路由状态保留效果

```


## 选配常见问题

安装选配生成项目的依赖，发现安装依赖报错，例如：

![Alt text](docs/question1.png)

react-designer缺少@babel/plugin-proposal-class-properties依赖定义，子模块中又使用了react-designer，导致依赖安装报错。

**解决方案**：

在父工程中packages.json中添加 @babel/plugin-proposal-class-properties 这个依赖，重新安装依赖即可。
类似的依赖缺失均可通过添加依赖再重新安装去解决。