gin-vue-admin侧边栏添加图标

### 修改 `gin-vue-admin` 项目中的侧边栏菜单以添加图标 为了在 `gin-vue-admin` 的侧边栏菜单中添加图标，需修改前端部分的路由配置文件以及对应的组件样式。 #### 路由配置调整 在 `src/router/routes.ts` 文件内定义了应用的所有路由。每个菜单项通过对象表示，其中包含路径、名称和其他属性。要为这些菜单项添加图标支持，在现有字段基础上增加 `meta.icon` 属性用于指定图标的类名或具体图标名称[^1]： ```typescript { path: '/example', name: 'Example', // 确保此名字唯一并对应相应的权限控制 ["Example"] component: Layout, redirect: '/example/list', meta: { title: '示例页面', icon: 'el-icon-s-help' }, // 添加icon属性 children: [ { path: 'list', name: 'ExampleList', component: () => import('@/views/example/index.vue'), meta: { title: '列表页', icon: 'el-icon-document' } } ] } ``` 上述代码片段展示了如何向父级和子级路由条目分别加入不同的图标。这里使用的 `"el-icon-*"` 是 Element Plus 组件库提供的图标集合之一；当然也可以根据实际需求选用其他第三方图标集或是自定义 SVG 图标[^2]。 #### 更新 SideMenu 组件逻辑 接着前往负责渲染左侧导航栏的组件（通常位于 `src/layout/components/Sidebar/`) 下找到 `SideMenu.vue` 或者类似的文件。在此处处理显示逻辑时读取路由元数据里的 `icon` 字段，并将其传递给 Icon 组件作为 props 使用[^3]: ```vue <template> <!-- ... --> <MenuItem v-for="item in permission_routers" :key="item.name"> <Icon v-if="item.meta && item.meta.icon" :type="item.meta.icon"></Icon> {{ item.meta.title }} <SubMenu v-if="item.children && item.children.length > 0"> <MenuItem v-for="subItem in item.children" :key="subItem.name"> <Icon v-if="subItem.meta && subItem.meta.icon" :type="subItem.meta.icon"></Icon>{{ subItem.meta.title }} </MenuItem> </SubMenu> </MenuItem> </template> <script setup lang="ts"> import { computed } from "vue"; import { useStore } from "@/store"; const store = useStore(); // 获取有权限访问的路由表 const permission_routers = computed(() => store.getters.permission_routers); </script> ``` 这段模板说明当存在 `meta.icon` 数据时会实例化一个 `<Icon>` 标签来展示相应图形符号。对于多层嵌套结构，则递归遍历所有可能存在的子节点并同样赋予它们各自的图标表现形式。