竖直分类导航菜单三级导航栏vue

### 如何在 Vue 中实现带三级子菜单的垂直分类导航栏 要在 Vue 中实现带有三级子菜单的垂直分类导航栏，可以通过组合 `Element-UI` 和递归组件来完成。以下是详细的说明和最佳实践。 #### 使用 Element-UI 构建基础框架 通过引入 `Element-UI` 提供的基础组件库，可以快速构建一个具有多级嵌套功能的侧边导航菜单[^2]。具体来说，`el-submenu` 是用于创建子菜单的核心组件，而 `el-menu-item` 则表示单个菜单项。 #### 路由配置支持多级结构 为了使导航能够动态反映路由的变化，需先定义好对应的路由表。以下是一个简单的路由配置示例： ```javascript const routes = [ { path: '/', redirect: '/homePage' // 根路径重定向至首页 }, { path: '/homePage', name: 'HomePage', component: () => import('@/views/HomePage.vue'), meta: { title: '首页' } }, { path: '/systemManagement', name: 'SystemManagement', component: () => import('@/views/SystemManagement.vue'), children: [ { path: 'userManagement', name: 'UserManagement', component: () => import('@/views/UserManagement.vue'), meta: { title: '用户管理', parentTitle: '系统管理' } }, { path: 'roleManagement', name: 'RoleManagement', component: () => import('@/views/RoleManagement.vue'), meta: { title: '角色管理', parentTitle: '系统管理' } } ], meta: { title: '系统管理' } }, { path: '/tableManagement', name: 'TableManagement', component: () => import('@/views/TableManagement.vue'), children: [ { path: 'dataList', name: 'DataList', component: () => import('@/views/DataList.vue'), meta: { title: '数据列表', parentTitle: '表格管理' } } ], meta: { title: '表格管理' } } ]; ``` 此路由配置包含了根路径重定向、首页以及多个父级与子级菜单的关系。 #### 创建递归组件渲染多级菜单 利用 Vue 的递归特性，可以轻松处理任意深度的菜单树形结构。下面是一个基于 `Element-UI` 的递归菜单组件示例： ```vue <template> <div v-if="menus && menus.length"> <el-menu :default-active="$route.path" router class="el-menu-vertical-demo"> <MenuItem v-for="(item, index) in menus" :key="index" :menu="item"></MenuItem> </el-menu> </div> </template> <script> import MenuItem from './MenuItem'; export default { components: { MenuItem }, props: ['menus'] }; </script> ``` 其中，`MenuItem` 是负责实际渲染每一层菜单逻辑的关键部分： ```vue <template> <div> <!-- 如果有子菜单 --> <el-submenu v-if="menu.children && menu.children.length" :index="menu.meta.title || ''"> <template slot="title">{{ menu.meta.title }}</template> <MenuItem v-for="(childMenu, childIndex) in menu.children" :key="childIndex" :menu="childMenu"></MenuItem> </el-submenu> <!-- 否则为普通菜单项 --> <el-menu-item v-else :index="menu.path"> {{ menu.meta.title }} </el-menu-item> </div> </template> <script> export default { name: 'MenuItem', props: ['menu'] }; </script> ``` 以上代码实现了对传入菜单数组的逐层解析，并根据是否存在子节点决定使用 `el-submenu` 或者 `el-menu-item` 渲染当前层级的内容。 #### 自定义样式增强用户体验 对于一级菜单选中状态下的视觉效果调整，可通过覆盖默认 CSS 类名的方式实现个性化设计[^3]。例如设置激活状态下的一级菜单背景颜色及文字颜色如下所示： ```css .el-menu .el-menu-item.is-active { background-color: #08336F !important; color: aliceblue !important; } ``` 如果希望进一步美化界面，还可以考虑加入渐变色或其他图形资源作为背景装饰。 ---