# vue-next-admin
**Repository Path**: haml/vue-next-admin
## Basic Information
- **Project Name**: vue-next-admin
- **Description**: 🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等,适配手机、平板、pc 的后台开源免费模板库(vue2.x请切换vue-prev-admin分支)
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://gitee.com/lyt-top
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 2394
- **Created**: 2025-07-11
- **Last Updated**: 2025-09-23
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
#### 💝 长期赞助商
#### 🌈 介绍
基于 vue3.x + CompositionAPI setup 语法糖 + typescript + vite + element plus + vue-router-next + pinia 技术,适配手机、平板、pc 的后台开源免费模板,希望减少工作量,帮助大家实现快速开发。
#### ⛱️ 线上预览
- vue3.x 版本预览(vue-next-admin)http://vuenextadmin.ccfast.cc/
- vue2.x 版本预览(vue-prev-admin)https://lyt-top.gitee.io/vue-prev-admin-preview/#/login
- vue3.x + uni-app 商城 H5(vue-next-admin-shop)https://lyt-top.gitee.io/vue-next-admin-shop-preview
#### 💒 代码仓库
- vue3.x 版本 https://gitee.com/lyt-top/vue-next-admin
- vue2.x 版本 https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin
#### 🚧 安装 cnpm、yarn
- 复制代码(桌面 cmd 运行) `npm install -g cnpm --registry=https://registry.npm.taobao.org`
- 复制代码(桌面 cmd 运行) `npm install -g yarn`
#### 🏭 环境支持
| Edge | Firefox | Chrome | Safari |
| --------- | ------------ | ----------- | ----------- |
| Edge ≥ 88 | Firefox ≥ 78 | Chrome ≥ 87 | Safari ≥ 13 |
> 由于 Vue3 不再支持 IE11,故而 ElementPlus 也不支持 IE11 及之前版本。
#### ⚡ 使用说明
建议使用 cnpm,因为 yarn 有时会报错。node 版本 > 14.18+/16+
> Vite 不再支持 Node 12 / 13 / 15,因为上述版本已经进入了 EOL 阶段。现在你必须使用 Node 14.18+ / 16+ 版本。
```bash
# 克隆项目
git clone https://gitee.com/lyt-top/vue-next-admin.git
# 进入项目
cd vue-next-admin
# 安装依赖
cnpm install
# 运行项目
cnpm run dev
# 打包发布
cnpm run build
```
#### 📚 开发文档
- 查看开发文档:https://lyt-top.gitee.io/vue-next-admin-doc-preview
- 查看开发文档:https://lyt-top.github.io/vue-next-admin-doc-preview/
#### 💯 学习交流加 QQ 群
> 群已满,请加以下群号,感谢老哥们支持!
群号:931596000
其它交流群请查看文档首页 [vueNextAdmin 解疑问](https://lyt-top.gitee.io/vue-next-admin-doc-preview/)
#### 💒 集成后端
- @zuohuaijun Admin.NET
- @熊猫 PandaGoAdmin
- @甜蜜蜜 GoPro 平台
- @甜蜜蜜 NiuPi 平台
- @游子 GFast-V3
- @diygw.com gw-ui-php
- @zsvg vboot-net
- @zsvg vboot-java
- @青红造了个白 buildadmin
- @Goodwell iotfast(一个开源的物联网平台)
#### ❤️ 鸣谢列表
- vue
- vue-next
- element-ui
- element-plus
- vue-router-next
- pinia
- echarts
- axios
- countUp
- mitt
- nprogress
- screenfull
- sortablejs
- sass
- typescript
- vite
- wangeditor
- cropperjs
- print-js
- vue-grid-layout
- splitpanes
- jsplumb
- js-table2excel
- vite-plugin-cdn-import
- js-cookie
- qrcodejs2-fixes
- qs
- vue-clipboard3
- vue-i18n
- vite-plugin-compression
- vite-plugin-vue-setup-extend-plus
#### 💕 特别感谢
特别感谢老哥们的建议、指导与帮忙。谢谢!
- @省长
- @唐参
- @川歌
- @华仔
#### 💌 支持作者
如果觉得框架不错,或者已经在使用了,希望你可以去 Github 或者
Gitee 帮我点个 ⭐ Star,这将是对我极大的鼓励与支持。
你现在用的 `vue-next-admin` 默认做了「两级化」处理,目的是为了简化 `keep-alive` 缓存、菜单渲染和面包屑逻辑。核心问题出在 **`formatTwoStageRoutes`** 这一步,它会把所有多级路由「压扁」成二级,只保留 `layout -> child` 的结构。
如果你需要支持多级嵌套,同时又不想大改原有功能,可以按下面思路改造:
---
## 🔑 思路
1. **保留原始路由结构**(即不强制压成二级)。
2. **递归处理 keep-alive 缓存**(代替现在的“只保留二级”逻辑)。
3. **递归生成菜单 & 面包屑**(`routesList` store 里的存储需要能支持多级)。
4. **保持 `isDynamic`、`isKeepAlive` 等元信息的兼容**。
---
## ✅ 最小改动方案
### 1. 保留原始路由树
把 `formatTwoStageRoutes` 改成递归处理,而不是硬塞到 `newArr[0].children`:
```ts
// 替换 formatTwoStageRoutes
export function formatMultiStageRoutes(arr: any, cacheList: string[] = []) {
if (arr.length <= 0) return [];
return arr.map((v: any) => {
const route = { ...v };
// 动态路由标记
if (route.path.indexOf('/:') > -1) {
route.meta['isDynamic'] = true;
route.meta['isDynamicPath'] = route.path;
}
// keep-alive 收集
if (route.meta?.isKeepAlive && route.name) {
cacheList.push(route.name);
}
// 递归 children
if (route.children && route.children.length > 0) {
route.children = formatMultiStageRoutes(route.children, cacheList);
}
// 存储缓存 name
const stores = useKeepALiveNames(pinia);
stores.setCacheKeepAlive(cacheList);
return route;
});
}
```
这样路由层级不会被“砍”到两级,而是完整保留。
---
### 2. 在 `initFrontEndControlRoutes` / `initBackEndControlRoutes` 里替换调用
把原来的:
```ts
const dynamicRoutes = formatTwoStageRoutes(flatRoutes);
```
换成:
```ts
const dynamicRoutes = formatMultiStageRoutes(flatRoutes);
```
这样前后端的路由初始化都支持多级。
---
### 3. 保证菜单 & 面包屑递归
* `routesList` 现在是用来存菜单的,只需要在存储时允许多层 children,不要 flatten。
* 面包屑一般是递归查找父节点链,递归写法对多级支持良好,不需要大改。
---
### 4. 保持向下兼容
* `isKeepAlive`:递归收集 name,不会影响原逻辑。
* `isDynamic`:依旧在 path 里做标记,不受层级影响。
* `tagsView`:依赖路由 `meta`,多级依旧能正常解析。
---
## ⚠️ 可能遇到的问题
1. **菜单 UI 展开**
默认的侧边栏只做了两级菜单展开,如果要三级以上,需要改 `el-menu` 的 `v-for` 递归渲染。
2. **keep-alive include**
默认只缓存二级,现在改成递归后,三级、四级也能缓存,但要注意 name 必须唯一。
3. **面包屑**
递归找父路由链就能解决,不需要改动太多。
---
## 📌 总结
最小改动就是 **只替换 `formatTwoStageRoutes` → 递归实现**,再让菜单、面包屑支持递归渲染,这样路由功能上就能支持任意多级嵌套,同时保留原有的 `keep-alive` 和 `isDynamic` 逻辑。
---
要不要我帮你写一个 **完整的递归菜单组件(基于 el-menu)**,替换现有的二级菜单?