#### 🌈 介绍
基于 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）**，替换现有的二级菜单？