vue-element-admin-master⼆级路由三级菜单显⽰的改进原项⽬菜单嵌套对应的路由嵌套
但实际项⽬中路由只有两级，菜单有三级,
第⼆级路由的功能要实现分组或⼦分类的功能，在菜单中实现三级
实现思路:
在上⼀篇中实现从服务器端动态得到路由后src/store/modules/permission.js⽂件中判断实际vue组件是否存在，如果存在则⽣成路由，存⼊到src/store/index.js  getters routers: state => uters 中备⽤
动态获取的路由，带⼀参数groupName，如果此参数相同，则代表要⽣成三级菜单
然后在src/views/layout/Sidebar ⽣成菜单时，从uters中获取路由，判断groupName是否相同,⽣成新的三级数组，供菜单⽣成使⽤
⼆级路由⽣成三级菜单代码如下:
newmenu: function () {
/
/let newmenuarray = []
//将⼆级路由分隔，然后⼆级中有分组的合并为三级，供菜单使⽤
let newmenuarray = this.$s.store_all_routers;
newmenuarray.map(function (itemmenu, itemIndex) {
let menu_temp_child_noGroup = []//⽆分组
let menu_temp_child_useGroup = []//有分组
if (itemmenu.children && itemmenu.children != '') {
itemmenu.children.map(function (childmenu, childIndex) {
if (upName == '') {
menu_temp_child_noGroup.push(childmenu)
}
let tempaaaa = []
tempaaaa = arrCheck(itemmenu.children)
if (tempaaaa != "") {
//console.log(tempaaaa)
menu_temp_child_useGroup = tempaaaa
}
})
itemmenu.children = ""
itemmenu.children_noGroup = menu_temp_child_noGroup
itemmenu.children_useGroup = menu_temp_child_useGroup
vue element admin}
})
return newmenuarray
},
//将相同的分组名称的数据重新编组合并function arrCheck(arr) {
//console.log(arr.length)
var newArr = []
var temp = ""
for (var i = 0; i < arr.length; i++) {
var temp_arr = []
temp = arr[i].groupName;
if (temp) {
for (var j = 0; j < arr.length; j++) {
if (arr[j].groupName == temp) {
temp_arr.push(arr[j])
arr[j] = -1;
}
}
if (temp != -1) {
newArr.push(temp_arr)
}
}
}
return newArr
}
菜单组件模板的嵌套删除掉，直接⽣成三级菜单
<el-menu mode="vertical" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EF    <template>
<div class="menu-wrapper">
<template v-for="item in newmenu" v-if="!item.hidden">
<el-submenu :index="item.name||item.path" :key="item.name">
<template slot="title">
<svg-icon v-if="a&&a.icon" :icon-class="a.icon"></svg-icon>
<span v-if="a&&a.title">{{a.title}}</span>
</template>
<!--第⼆层的连接-->
<template v-for="child in item.children_noGroup" v-if="!child.hidden">
<router-link :to="{path:item.path+'/'+child.path+'?'+child.querystring}"  :key="child.name" v-if="">
<el-menu-item :index="item.path+'/'+child.path">
<span v-if="a&&a.title">{{a.title}}</span>
</el-menu-item>
</router-link>
</template>
<!--<!--第三层的连接-->
<div v-for="child in item.children_useGroup" class="menu-wrapper nest-menu" v-if="!child.hidden">
<el-submenu :index="child[0].name||child[0].path" :key="child[0].name">
<template slot="title">
<span>{{child[0].groupName}}</span>
</template>
<template v-for="child2 in child" v-if="!child2.hidden">
<!-- <router-link :to="{path:item.path+'/'+child2.path,query:{typeid:child2.queryValue}}" :key="child2.name">
-->
<router-link :to="{path:item.path+'/'+child2.path+'?'+child2.querystring}" :key="child2.name">
<el-menu-item :index="item.path+'/'+child2.path">
<span v-if="a&&a.title">{{a.title}}</span>
</el-menu-item>
</router-link>
</template>
</el-submenu>
</div>
</el-submenu>
</template>
</div>
</template>
</el-menu>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。