# 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

vue element plus typescript vite license

 

#### 💝 长期赞助商 #### 🌈 介绍 基于 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)**,替换现有的二级菜单?