Admin 项目实战(十):菜单自动配置
这是 Admin 练习项目的第十篇,练习如何自动解析页面生成菜单。
效果
在 pages 目录添加的页面会自动加载到侧边栏菜单。
实现菜单自动配置
这里没有使用第三方库,而是借鉴之前练习的思想自己动手实现。
实现思路
- 遍历 pages 目录,筛选菜单页
- 转换成期望的对象结构
- 测试新增页面,正确处理名称、图标与路由
遍历目录与筛选
修改 SideMenu 组件:
| // src\components\SideMenu.vue
const pages: Record<string, any> = import.meta.glob("~/pages/*.vue", {
eager: true,
});
const menus = Object.keys(pages)
.map((k) => ({ k, v: pages[k].default }))
.filter((page) => page.v.menu);
|
通过 import.meta.glob 从文件系统导入 vue 模块,根据模块中是否包含 menu
属性进行筛选。
对象结构转换
转换目标
| const courses = reactive([
{ name: "vue-bucket", icon: "", url: "/vue" },
{ name: "React18全家桶", icon: "", url: "/react" },
{ name: "TypeScript基础", icon: "", url: "" },
{ name: "Node与服务器端", icon: "", url: "" },
{ name: "算法与数据结构", icon: "", url: "" },
{ name: "Vue全家桶源码", icon: "", url: "" },
{ name: "React全家桶源码", icon: "", url: "" },
{ name: "前端工程化实践", icon: "", url: "" },
{ name: "面试题串讲", icon: "", url: "" },
]);
|
转换前
执行转换
这里通过解析加载后的菜单模块,对应到期望的菜单对象结构。
| const menus = Object.keys(pages)
.map((k) => ({ k, v: pages[k].default }))
.filter((page) => page.v.menu)
.map((page) => ({
name: page.v.menu,
icon: page.v.icon,
url: page.k.replace("../pages", "").replace(".vue", ""),
}));
|
注意:这里的 url 转换采用了路径替换而不是 path
分析,可根据实际情况选择技术方案。
增加新页面与图标选择
以 node 课程为例,在 pages 目录新增 node.vue 页面:
| <!--src\pages\node.vue-->
<template>
<div>NodeJS基础</div>
</template>
<script lang="ts">
export default {
menu: "NodeJS基础",
icon: "i-logos-nodejs-icon",
};
</script>
<route lang="yaml">
meta:
layout: default
</route>
|
到 https://icones.js.org/collection/all?s=node 上挑选图标,点击保存后可看到 NodeJS 课程已正确加载。
可能的改进
可以根据实际需求在这个机制的基础上进行改进,例如增加 id 进行排序,根据业务规则进行权限配置等。
上一课
凡本网注明"来源:XXX "的文/图/视频等稿件,本网转载出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如涉及作品内容、版权和其它问题,请与本网联系,我们将在第一时间删除内容!
作者: 勃纳什
来源: https://zhuanlan.zhihu.com/p/645617582