Vue实战【调整Vue-element-admin中的菜单栏，并添加顶部模块菜单栏】

首先，我们需要了解一下 Vue-element-admin 的菜单栏是如何实现的。Vue-element-admin 中的菜单栏是通过路由配置文件 `src/router/index.js` 中的 `asyncRoutes` 定义的，其中每一个路由对象代表一个菜单项。

要调整菜单栏，我们需要修改路由配置文件。下面是一个简单的示例，我们将 `asyncRoutes` 中的第一个菜单项改为 “用户管理”，并添加一个新的顶部模块菜单栏。

import Layout from '@/layout'

export const asyncRoutes = [
  {
    path: '/user',
    component: Layout,
    redirect: '/user/list',
    alwaysShow: true, // 一直显示根路由
    name: 'User',
    meta: {
      title: '用户管理',
      icon: 'user'
    },
    children: [
      {
        path: 'list',
        component: () => import('@/views/user/list'),
        name: 'UserList',
        meta: { title: '用户列表' }
      },
      {
        path: 'add',
        component: () => import('@/views/user/add'),
        name: 'UserAdd',
        meta: { title: '添加用户' }
      }
    ]
  },
  // 其他菜单项...
]

export const constantRoutes = [
  // 其他路由...
]

const createRouter = () => new Router({
  // ...
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // 重置路由器
}

export default router

上面的代码中，我们将第一个菜单项的 `title` 改为 “用户管理”，并添加了一个新的菜单项 `UserList` 和 `UserAdd`，并将它们添加到了 `User` 路由下面。我们还可以看到 `alwaysShow` 属性被设置为 `true`，这意味着菜单栏将一直显示根路由，即 `User` 路由。

现在我们需要在 `src/layout/components/Navbar.vue` 组件中添加一个新的顶部模块菜单栏。下面是一个简单的示例：

<template>
  <div class="navbar-container">
    <div class="navbar-logo">
      <!-- 左侧 Logo -->
    </div>
    <div class="navbar-menu">
      <!-- 左侧菜单栏 -->
    </div>
    <div class="navbar-module">
      <el-menu mode="horizontal">
        <el-submenu index="module1">
          <template slot="title">模块1</template>
          <el-menu-item index="module1-1">菜单项1</el-menu-item>
          <el-menu-item index="module1-2">菜单项2</el-menu-item>
        </el-submenu>
        <el-submenu index="module2">
          <template slot="title">模块2</template>
          <el-menu-item index="module2-1">菜单项1</el-menu-item>
          <el-menu-item index="module2-2">菜单项2</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="navbar-right">
      <!-- 右侧菜单栏 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Navbar'
}
</script>

<style scoped>
/* 样式 */
</style>

上面的代码中，我们在 `navbar-module` 中添加了一个 `el-menu` 组件，其中包含了两个 `el-submenu` 组件，分别代表两个模块。每个 `el-submenu` 组件中包含了若干个 `el-menu-item` 组件，代表不同的菜单项。

现在，我们已经完成了对 Vue-element-admin 中菜单栏的调整和顶部模块菜单栏的添加。