vue-element-plus-admin添加菜单

在vue-element-plus-admin中添加菜单可以通过以下步骤完成：

1. **创建菜单配置文件**：
首先，在项目的`src/router`目录下创建一个新的菜单配置文件，例如`menu.js`。在这个文件中定义菜单的路由和相关信息。

   export default [
     {
       path: '/dashboard',
       name: 'Dashboard',
       meta: { title: '仪表盘', icon: 'dashboard' },
       component: () => import('@/views/dashboard/index.vue')
     },
     {
       path: '/example',
       name: 'Example',
       meta: { title: '示例', icon: 'example' },
       component: () => import('@/views/example/index.vue'),
       children: [
         {
           path: 'table',
           name: 'Table',
           meta: { title: '表格', icon: 'table' },
           component: () => import('@/views/example/table.vue')
         },
         {
           path: 'form',
           name: 'Form',
           meta: { title: '表单', icon: 'form' },
           component: () => import('@/views/example/form.vue')
         }
       ]
     }
   ]

2. **引入菜单配置文件**：
在`src/router/index.js`中引入刚才创建的菜单配置文件，并将其添加到路由配置中。

   import { createRouter, createWebHistory } from 'vue-router'
   import menu from './menu'

   const routes = [
     ...menu,
     // 其他路由配置
   ]

   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes
   })

   export default router

3. **配置侧边栏菜单**：
在`src/layout/components/Sidebar.vue`中，配置侧边栏菜单以显示新添加的菜单项。

   <template>
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"
         :unique-opened="true"
         :collapse-transition="false"
         mode="vertical"
       >
         <sidebar-item
           v-for="route in permissionRoutes"
           :key="route.path"
           :item="route"
           :base-path="route.path"
         />
       </el-menu>
     </el-scrollbar>
   </template>

   <script>
   import SidebarItem from './SidebarItem.vue'

   export default {
     components: { SidebarItem },
     computed: {
       permissionRoutes() {
         return this.$store.getters.permissionRoutes
       },
       activeMenu() {
         // 计算当前激活的菜单项
       },
       isCollapse() {
         return this.$store.state.settings.isCollapse
       }
     }
   }
   </script>

4. **创建SidebarItem组件**：
在`src/layout/components/SidebarItem.vue`中，创建一个递归组件来渲染菜单项。

   <template>
     <el-sub-menu :index="resolvePath(item.path)" v-if="!item.hidden">
       <template #title>
         <i :class="item.meta.icon"></i>
         <span>{{ item.meta.title }}</span>
       </template>
       <sidebar-item
         v-for="child in item.children"
         :key="child.path"
         :item="child"
         :base-path="resolvePath(child.path)"
       />
     </el-sub-menu>
   </template>

   <script>
   export default {
     props: {
       item: {
         type: Object,
         required: true
       },
       basePath: {
         type: String,
         default: ''
       }
     },
     methods: {
       resolvePath(routePath) {
         return this.basePath ? `${this.basePath}/${routePath}` : routePath
       }
     }
   }
   </script>

通过以上步骤，你就可以在vue-element-plus-admin中成功添加新的菜单项。