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>
```
这样，我们就实现了一个简单的后台管理系统
菜单栏，既美观又高效，为用户提供了良好的使用体验。当然，如果需要更
加复杂的功能，我们需要在以上的代码结构上进行不断地扩展和完善。
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1824
