12 使用Vue+Vue-router+el-menu实现菜单功能实战

<think>我们正在使用Vue2，所以路由配置会有所不同。在Vue2中，我们使用Vue Router 3，而引用[1]中展示的是Vue Router 4（用于Vue3）的配置。因此，我们需要调整路由配置的写法。 目标：实现一个头部导航，中间是系统名称，两侧是导航项，支持多级路由（即导航项可能有下拉菜单） 步骤： 1. 配置路由：在Vue2项目中，我们需要定义路由，并为每个路由添加meta信息，如title、icon等。同时，为了区分左右导航，我们可以给路由添加一个position属性（例如：'left'或'right'）来指定它出现在哪一侧。 2. 创建布局组件：使用Element UI的布局组件（el-container, el-header, el-main）和导航菜单组件（el-menu, el-menu-item, el-submenu）。 3. 根据路由生成菜单：在布局组件的模板中，使用两个el-menu（一个在左侧，一个在右侧），遍历路由配置，根据position属性生成对应的菜单项。对于有子路由的项，生成下拉菜单（el-submenu）。 4. 样式调整：使用Flex布局使头部分为三部分（左中右），并确保中间的系统名称居中。 注意：在Vue2中，我们使用`vue-router@3`，路由配置中的`children`用于嵌套路由，同时我们也可以用它来生成多级菜单。 下面是一个具体的实现方案： 一、路由配置示例（/src/router/index.js）： ```javascript import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ routes: [ { path: '/', redirect: '/dashboard' // 默认重定向 }, { path: '/dashboard', name: 'Dashboard', component: () => import('@/views/Dashboard.vue'), meta: { title: '首页', icon: 'el-icon-s-home', position: 'left' // 指定在左侧导航 }, children: [ // 子路由，用于生成下拉菜单 { path: 'overview', name: 'Overview', component: () => import('@/views/Overview.vue'), meta: { title: '概览' } }, { path: 'detail', name: 'Detail', component: () => import('@/views/Detail.vue'), meta: { title: '详情' } } ] }, { path: '/monitor', name: 'Monitor', component: () => import('@/views/Monitor.vue'), meta: { title: '监控', icon: 'el-icon-monitor', position: 'left' } }, { path: '/settings', name: 'Settings', component: () => import('@/views/Settings.vue'), meta: { title: '设置', icon: 'el-icon-setting', position: 'right' // 指定在右侧导航 } }, { path: '/help', name: 'Help', component: () => import('@/views/Help.vue'), meta: { title: '帮助', icon: 'el-icon-question', position: 'right' } } ] }); ``` 二、布局组件（例如：/src/layout/Layout.vue）： 在这个组件中，我们将创建头部导航，并分为左、中、右三部分。 ```html <template> <el-container style="height: 100vh;"> <el-header class="header"> <!-- 使用flex布局，分为三部分 --> <div class="header-container"> <!-- 左侧导航 --> <el-menu :default-active="activeMenu" mode="horizontal" class="left-menu" background-color="#f5f5f5" text-color="#333" active-text-color="#409EFF"