# qiankun-demo

**Repository Path**: 470584371/qiankun-demo

## Basic Information

- **Project Name**: qiankun-demo
- **Description**: vue+qiankun+ant-design-vue
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://39.99.214.137:8090
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 2
- **Created**: 2022-02-12
- **Last Updated**: 2025-07-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, qiankun

## README

# qiankun-demo

#### 介绍
此项目是qiankun微前端的尝试项目，为了是尝试使用qiankun完成子应用功能，菜单顶部展示子应用目录，点击显示子应用的菜单，并完成页面跳转

[预览地址](http://39.99.214.137:8090/)

测试账号：test
密码：111111

#### 使用说明

1. portal是主应用项目，是vue2+ant-design-vue˜
2. sub-app1是营销子应用，是vue2+element-ui
3. 后续将整合react和vue3的子应用

#### 待完成事项

- [x] 1. 点击菜单实现跳转
- [x] 2. 输入URL后，菜单自动展开
- [x] 3. 登录拦截
- [x] 4. 动态路由，关于components引入
- [x] 5. 左侧菜单背景色跟随主题切换
- [x] 6. 顶部标签栏组件（待优化）
- [x] 7. 子应用通过nginx设置跨域，使父应用可以访问
- [x] 8. 子应用的动态路由，并查看父应用缓存是否生效
- [ ] 9. 新增react子应用项目，使用jsx语法
- [x] 10. 可根据设置实现菜单缓存
- [ ] 11. 子应用加载失败添加页面提示
- [x] 12. 子应用实现keep-alive，主应用需手动进行子应用的加载与卸载(keep-alive分支)
- [ ] 13. 优化tags组件
#### 问题记录
*   ant-design-vue关于menu递归实现，多级子菜单选中后高亮问题
    > 参考：https://gitee.com/iczer/vue-antd-admin/blob/master/src/components/menu/menu.js
*   tag标签滚动问题，当切换菜单，标签位置偏离问题
    > 参考：https://gitee.com/panjiachen/vue-element-admin/blob/master/src/layout/components/TagsView/ScrollPane.vue

#### 知识点
*   在实现页面缓存时，keep-alive缓存router-view时，页面views目录下文件需要加name名称