vue Elemente-UI 管理后台自定义 导航菜单栏
记录管理后台 侧边导航栏做成通用小组件
借助 Elemente-UI <el-aside>：侧边栏容器 <<el-menu>：导航菜单
创建 父组件页面
aside.vue
*（
default-active 为当前激活菜单的 index，（设置为当前的路由名称 this.$route.fullPath）
@select 事件为 菜单选择触发的事件 借助跳转路由 并设置 default-active 的值
）
<el-aside>
<el-menu
:default-active="$store.getters.active"
class="el-menu-vertical-demo"
@select="menuSelected"
background-color="#F0F6F6"
text-color="#3C3F41"
active-text-color="black"
unique-opened
collapse-transition
>
<NavMenu :navMenus="$router.options.routes"></NavMenu>
</el-menu>
</el-aside>
import NavMenu from '@/components/NavMenuWk'// 引入子组件
components: {
NavMenu// 声明子组件
}
menuSelected (e) {
// e 当前点击返回的路由
if (this.$route.fullPath === e) return // 当前路由不做操作
this.$store.commit('active', e)
this.$router.push(e)
}
创建子组件页面
NavMenuWk.vue
*（
判断当前组路由有没有子级 并判断是否显示路由 !navMenu.children&&!navMenu.hidden
将:index="navMenu.path" 设置为路由 为menuSelected事件点击返回的参数 (:index的值只能是字符串)
icon 为图标
如果有子级 继续调用本身 再次进行循环 <NavMenu>
）
<template>
<div class="navMenu">
<label v-for="(navMenu,index) in navMenus" :key="index">
<el-menu-item v-if="(!navMenu.children&&!navMenu.hidden)"
:key="navMenu.path"
:index="navMenu.path">
<template slot="title">
<img v-if="navMenu.icon" :src="navMenu.icon" alt="" slot="title" class="icon">
<span slot="title">{{navMenu.name}}</span>
</template>
</el-menu-item>
<el-submenu v-if="navMenu.children&&!navMenu.hidden"
:key="navMenu.path"
:index="navMenu.path">
<template slot="title">
<img v-if="navMenu.icon" :src="navMenu.icon" alt="" slot="title" class="icon">
<span> {{navMenu.name}}</span>
</template>
<NavMenu :navMenus="navMenu.children"></NavMenu>
</el-submenu>
</label>
</div>
</template>
<script>
export default {
name: 'NavMenu',
props: ['navMenus'],
data () {
return {
}
},
methods: {
}
}
</script>
<style scoped>
.icon{
16px;
height:16px;
margin-right:5px;
}
</style>
设置route (可直接设置 可使用服务端接口返回 数据格式如下)
routes: [ { path: '/', redirect: '/article', hidden: true }, { path: '/Home', component: Home, name: '文章管理', children: [ { path: '/article', name: '文章管理', component: article, hidden: false }, { path: '/compileArticle', name: '文章编辑', component: compileArticle, hidden: true } ] }, { path: '/Homes', component: Home, name: '归属管理', children: [ { path: '/affiliation', name: '归属管理', component: affiliation, hidden: false }, { path: '/compileAffiliation', name: '归属编辑', component: compileAffiliation, hidden: true } ] } ]