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>
```
这样，我们就
实现了一个简单的后台管理系统
菜单栏，既美观又高效，为用户提供了良好的使用体验。当然，如果需要更加复杂的功能，我们需要在以上的代码结构上进行不断地扩展和完善。
本文介绍如何在Vue.js应用中结合ElementUI库，利用data函数和methods实现左侧菜单的动态图标显示功能。
最低0.47元/天 解锁文章
扫一扫
5416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
