Vue+ElementUI如何使用多级菜单
之前Spring Boot+Vue前后端分离开发06-----Vue开发指南(续2)我们使用ElementUI菜单的方法存在一定的问题,它的菜单在代码中用Json写死了,在后期菜单扩展中有一定局限性。为了避免这种情况,我们可以使用$router.options.routes
参数来解决这个问题
首先我们查看下目前的路由:路由给到了两种情况,一种是带子菜单的,另一种没有子菜单
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: '图书管理',
component: () => import('../views/Index.vue'),
redirect:"/bookManage",
children:[
//新增一个Table路由
{
path: '/bookManage',
name: '查询图书',
component: () => import('../views/BookManage.vue')
},
{
path: '/addBook',
name: '添加图书',
component: () => import('../views/AddBook.vue')
}
]
},
{
path: '/userManage',
name: '用户管理',
component: () => import('../views/UserManage.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
接着我们改进原来App.vue
的两处代码
修改后的代码,直接读取路由信息生成菜单,并且区分了有子菜单和无子菜单
<template>
<div>
<!--整体页面容器-->
<el-container style="height: 700px; border: 1px solid #eee">
<!--左侧菜单栏-->
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-active="this.$router.path" router>
<!--带子菜单的路由-->
<el-submenu v-if="item.children" v-for="(item,index) in $router.options.routes" :key="index" :index="index">
<template slot="title">{{ item.name }}</template>
<el-menu-item v-for="(item_child,i_child) in item.children" :key="i_child" :index="item_child.path">
<template slot="title">{{ item_child.name }}</template>
</el-menu-item>
</el-submenu>
<!--不带子菜单的路由-->
<el-menu-item v-if="!item.children" v-for="(item,index) in $router.options.routes" :key="index" :index="item.path">
<template slot="title">{{ item.name }}</template>
</el-menu-item>
</el-menu>
</el-aside>
<!--主内容部分-->
<el-container>
<!--内容头部-->
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<!--具体内容-->
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
修改后的效果如下