龙南网站建设,h5网站开发公司,网站备案证书,网站转移动版需求
v3-admin-vite是一款不错的后端管理模板#xff0c;主要是pany一直都在维护#xff0c;最近将后台管理也进行了升级#xff0c;顺便完成一直没时间解决的小痛痒#xff1a;
在不使用后端动态管理的情况下。我不希望单独维护一份路由定义#xff0c;我希望页面是自解…
需求
v3-admin-vite是一款不错的后端管理模板主要是pany一直都在维护最近将后台管理也进行了升级顺便完成一直没时间解决的小痛痒
在不使用后端动态管理的情况下。我不希望单独维护一份路由定义我希望页面是自解释的。就像HTML标记一个页面的标题等信息由页面内title决定而一个页面的访问地址路由由页面目录决定。很自然的思维是么单独维护一份路由感觉就没那么自然了我希望这一切都由页面自解释。访问路径我只需要移动页面的位置CtrlCV目录的结构就好了
思路
之前实战过数个项目大部分都轻车熟路了。但是对于v3-admin-vite系统还是有几个地方需要调整
1.目录的定义
目录的定义除了名称外还有图标等信息需要管理。因此需要采用文件补充信息我的解决方案是将要输出成为左侧目录结构的目录好绕口下放一个index.ts文件为了避免和其它的文件冲突约定默认导出export default必须包含title这个string信息表示目录名称神马title为空怎么办有点正常业务思维吧顺便把图标的定义也在导出解决。
2.View文件的定义
View文件的定义由于目录定义一样只需要将你导出成为菜单的vue模块添加导出定义即可。把meta信息导出自动输出路由配置。
3.Name约定
除了meta信息以外admin-v3还要求name不能一致没试过 改个一样的试试看我们可以直接从文件名读取至少一个目录下文件名是不会一致的。当然如果多个目录的话就要注意一下了功能页面名称唯一这个应该很容易办到。
4.递归扫描文件
webpack,vite等工具都提供了文件扫描的接口只是不能使用变量进行路径扫描必须字面量常量好在支持通配符。解决起来不难。
5.顺序问题的解决
由于工具扫描都是基于文件名称的而实际需要显示的结构和文件顺序 不一定相同例如我有a.vue,b.vue按名称扫描a会出现在前面。因此我扩充了一下Meta定义添加了一个position属性 没设置时默认以100作为排序值根据其对所有的目录递归排序这样就OK了。
功能实现
看一下最终的对应效果 对于目录标记我们只需要在目录下添加一个index.ts文件
import { RouteMetaEx } from /routerexport default {title: 二级目录测试,
} as RouteMetaEx对于View模块我们只需要添加多一个typescript块导出meta
templatediv测试节点3/div
/template
script langts
import { RouteMetaEx } from /router
const meta: RouteMetaEx {title: 3级节点1, // 只有导出title的才会成为路由elIcon: Cpu, // element-ui的内置ICON比svgIcon优先// svgIcon: dashboard,roles: [role0], // 哪些角色可以显示position: 100//keepAlive: true // 是否要keepAlive保持页面状态// hidden: true 默认为false不会挂载到菜单
}
export default meta
/script使用是不很简单哈哈哈哈。
这里添加了position的RouteMetaEx在后面有定义其它结构和功能和Meta定义一致。注意vue的文件名在view下要唯一。
然后我们的src/router/index.ts里dynamicRoutes需要按照下面方式来导出 export interface RouteMetaEx extends RouteMeta {position?: number //排序不填写的话默认为100用于控制菜单顺序
}/*** admin-vite-v3 自动路由* 递归扫描views下的文件识别导出title的页面加入路由需要配置权限 (Roles 属性)* 注意二级目录产生要求在目录index.ts里导出含title的meta* author Jim 2024/4/1*/
const autoRoutes: ArrayRouteRecordRaw []const scanDir: Recordstring, any import.meta.glob(../views/**/index.ts, { eager: true }) // 处理目录
const dirNodeCache new Mapstring, RouteRecordRaw()
for (const key in scanDir) {const component scanDir[key]if (component.default?.title) {// 通过默认导出title判断const groups /\.\.\/views\/((\w\/))index\.ts/.exec(key) || []const dirName groups[2].slice(0, -1) // 提取目录名const perfix groups[1].slice(0, -dirName.length - 1) // 提取前缀目录const currentNode: RouteRecordRaw {path: dirName,name: dirName,children: [],meta: { ...component.default, alwaysShow: true } // 合并alwaysShow进去保持目录结构}const upperNode dirNodeCache.get(perfix)if (upperNode) {upperNode.children?.push(currentNode)} else {// 一级目录currentNode.path /${dirName} // 更改根格式currentNode.component LayoutsautoRoutes.push(currentNode)}dirNodeCache.set(groups[1], currentNode)}
}
const scanModule: Recordstring, any import.meta.glob(../views/**/*.vue, { eager: true }) // 处理节点
for (const key in scanModule) {const component scanModule[key]if (component.default?.title) {// 通过默认导出title判断const groups /\.\.\/views\/((\w\/)*)(\w)\.vue/.exec(key) || []const dirPath groups[1]const moduleName groups[3]if (!dirPath) {// 一级菜单特殊处理autoRoutes.push({path: /${moduleName},name: moduleName,component: Layouts,redirect: /${moduleName}/index,meta: component.default,children: [{path: index,name: moduleName,component: () component,meta: component.default}]})} else {const currentNode: RouteRecordRaw {path: moduleName,name: moduleName,component: () component,meta: component.default}const upperNode dirNodeCache.get(dirPath)if (upperNode) {// 挂上级目录下没有定义就不要挂了upperNode.children?.push(currentNode)} else {console.error(upper node ${dirPath} not found)}}}
}const sortFunc (a: RouteRecordRaw, b: RouteRecordRaw) ((a.meta as RouteMetaEx).position ?? 100) - ((b.meta as RouteMetaEx).position ?? 100)
function sortByPosition(nodes: RouteRecordRaw[]) {nodes.forEach((node: RouteRecordRaw) {if (node.children) {const sortedChildren node.children.sort(sortFunc) // 排序所有childrensortByPosition(sortedChildren)}})
}
autoRoutes.sort(sortFunc)
sortByPosition(autoRoutes)export const dynamicRoutes: RouteRecordRaw[] autoRoutes
其他部分可以不用动。这样我们便有了路由导出的功能。 副作用
这样处理虽然开发方便但是也有它的局限和副作用。副作用就是分包问题由于所有的模块获取菜单定义必须读文件因此无法懒加载会导致扫描过程需要加载全部的模块这样一来当模块非常多的时候加载会比较耗资源也无法细化的分包。但对于中小项目一个gzip包全部load下来还是问题不大。大型项目可能要采用其它方案例如自动化脚本来输出路由。
