一:描述
将菜单渲染为上图样式
已确定路由中包含三级菜单,点击二级菜单时,在下方一tab选项卡方式展示所有三级菜单
代码
1.路由配置
{
path: '/build',
name: 'build',
meta: {
icon: 'office-building',
title: '一级菜单',
leaf: false,
hidden: false,
},
component: loginpage,
redirect: '/build/screen',
children: [{
path: 'screen',
name: 'screen',
meta: {
title: '二级菜单',
threeMenu: false,
hidden: false,
},
component: () => import('../views/screen/Screen.vue'),
},
{
path: 'onlinem',
name: 'garden',
meta: {
title: '二级菜单',
threeMenu: true,
hidden: false,
},
component: Middle,
redirect: '/build/onlinem/review',
children: [{
path: 'review',
name: 'review',
meta: {
title: '三级菜单',
hidden: false,
},
component: () => import('../views/review/Review.vue'),
},
{
path: 'team',
name: 'team',
meta: {
title: '三级菜单',
hidden: false,
},
component: () => import('../views/team/Team.vue'),
},
{
path: 'fruit',
name: 'fruit',
meta: {
title: '三级菜单',
hidden: false,
},
component: () => import('../views/fruit/Fruit.vue'),
},
],
},
],
},
{
path: '/intel',
name: 'intel',
meta: {
icon: 'receiving',
title: '一级菜单',
leaf: false,
hidden: false,
},
component: loginpage,
redirect: '/intel/program',
children: [
{
path: 'program',
name: 'program',
meta: {
title: '二级菜单',
},
component: () => import('../views/planpage/planpage.vue'),
},
{
path: 'develop',
name: 'develop',
meta: {
title: '二级菜单',
},
component: () => import('../views/buildpage/buildpage.vue'),
},
],
},
路由配置说明
1.leaf 表示一级菜单下是否有子菜单。 true:只有一级菜单,没有自己菜单;false:有自己菜单(有二级菜单、三级菜单都是false)
2.hidden:该路由配置的信息是都要在导航栏中隐藏起来。true:在导航栏上隐藏起来;false:不隐藏
3.threeMenu:是否有三级菜单;true该二级菜单有三级菜单;false该二级菜单没有三级菜单
4.有三级菜单时, 二级菜单添加redirect进行重定向。
封装导航栏
导航栏直接使用elemen中的代码
sidebar.vue
<template>
<div class="sidebar">
<el-menu class="el-menu-demo" mode="horizontal" text-color="#444" active-text-color="##fff " :show-timeout="200"
router @select="handleSelect">
<sidebar-item v-for="(item,itemid) in permission_routes" :key="itemid" :item="item"></sidebar-item>
</el-menu>
//三级菜单展示
<div class="smenu" v-if="srs">
<div class="sbox">
<router-link v-for="three in snhm" :key="three.name" :to="three.path">
{{three.meta.title}}
</router-link>
</div>
</div>
</div>
</template>
computed: {
...mapGetters([
'permission_routes',
]),//动态路由
},
watch: {
"$route": {
handler(val, oldval) {
this.getChildRoute(val)
},
deep: true,
immediate: true
},
},
methods: {
// 二级菜单被选
handleSelect(key, keyPath) {
if (this.$store.state.user.token) {
// this.pagestate = false
this.$emit('pagestate', false)
}
},
// 三级菜单
getChildRoute(currRoute) {
console.log('三级菜单')
if (currRoute.matched.length == 3) {
this.permission_routes.map(item => {
if (currRoute.matched[0].path == item.path) {
// 二级路由,所有三级路由的数据
item.children.map(child => {
if (currRoute.matched[1].name == child.name) {
this.snhm = JSON.parse(JSON.stringify(child.children))
}
})
}
})
this.srs = true;//有三级菜单则展示
} else {
this.snhm = [currRoute];
this.srs = false;//没有三级菜单则不展示
}
}
},
在渲染导航栏过程中,需要判断菜单的hidden属性;由于v-if优先级高于v-for,将菜单内容进行组件封装
sidebaritem.vue
<template>
<div v-if="!item.meta.hidden">
<template v-if="item.meta.leaf">
<el-menu-item :index="item.redirect">
<span slot="title">{{item.meta.title}}</span>
</el-menu-item>
</template>
<el-submenu v-else :index="item.redirect">
<template slot='title'>
<span>{{item.meta.title}}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item v-for="(child,childId) in item.children" :index="item.path +'/'+ child.path" :key="childId"
v-if="!child.meta.hidden">
{{child.meta.title}}
</el-menu-item>
</el-submenu>
</div>
</template>
props: {
item: {
type: Object,
required: true,
},
},
以上根据转载修改为自己可用
转载地址:
(该文章为左侧两级导航栏及面包屑方式展示三级菜单)
https://blog.csdn.net/Start2019/article/details/119851382