vue + elementui 后台管理系统实现顶部一级菜单栏,左侧二级菜单栏

Vue和ElementUI是非常优秀的前端框架，能够辅助开发人员快速构建高效、美观的后台管理系统。其中，顶部一级菜单栏、左侧二级菜单栏是后台管理系统常见的设计模式，能够使用户快速定位到需要的功能，保证用户体验。下面，我就来阐述如何用Vue和ElementUI实现这样的菜单栏。

首先，在Vue中，路由是非常重要的。我们可以在router文件夹下新建一个index.js文件，配置路由信息。比如，我们可以定义如下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
  ]
})

这样，我们就定义了两个路由：/为主页，/about为关于我们。接下来，我们在App.vue文件中引入ElementUI，并且实现菜单栏的布局。如下：

<template>
  <div id="app">
      <header>
          <h1>后台管理系统</h1>
          <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal">
              <el-menu-item index="/">首页</el-menu-item>
              <el-menu-item index="/about">关于</el-menu-item>
          </el-menu>
      </header>
      <main>
          <el-aside width="200px" style="background-color: #f2f2f2;">
              <el-menu :default-openeds="['1']" class="el-menu-vertical-demo" :unique-opened="true">
                  <el-submenu index="1">
                      <template slot="title">
                          <i class="el-icon-menu"></i>
                          <span>菜单一</span>
                      </template>
                      <el-menu-item-group title="分组一">
                          <el-menu-item index="/option1-1">选项1</el-menu-item>
                          <el-menu-item index="/option1-2">选项2</el-menu-item>
                      </el-menu-item-group>
                      <el-menu-item-group title="分组二">
                          <el-menu-item index="/option2-1">选项3</el-menu-item>
                          <el-menu-item index="/option2-2">选项4</el-menu-item>
                      </el-menu-item-group>
                  </el-submenu>
              </el-menu>
          </el-aside>
          <el-main>
              <router-view></router-view>
          </el-main>
      </main>
  </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css'
import { Header, Menu, MenuItem, Submenu, MenuItemGroup, Main, Aside } from 'element-ui'

export default {
  name: 'App',
  components: {
    'el-header': Header,
    'el-menu': Menu,
    'el-menu-item': MenuItem,
    'el-submenu': Submenu,
    'el-menu-item-group': MenuItemGroup,
    'el-main': Main,
    'el-aside': Aside
  }
}
</script>

通过以上代码，我们实现了一个简单的菜单栏的布局，其中包括了顶部一级菜单栏和左侧二级菜单栏。在菜单栏的实现中，我们使用了ElementUI提供的Menu、MenuItem、Submenu、MenuItemGroup等组件来快速搭建。

最后，我们需要在对应的页面组件中，与路由链接相对应的显示内容。以About.vue组件为例：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>这是关于我们的页面</p>
  </div>
</template>

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

这样，我们就实现了一个简单的后台管理系统菜单栏，既美观又高效，为用户提供了良好的使用体验。当然，如果需要更加复杂的功能，我们需要在以上的代码结构上进行不断地扩展和完善。