这个方法适用于2级 2级以上就不可以了
父组件
<template>
<div>
<el-menu
:router="true"
background-color="#001529"
text-color="#fff"
class="navleft"
//这个是刷新页面保持菜单栏选中状态
:default-active="this.$route.path"
unique-opened>
<!-- 先循环数组,然后把每一项的值给传到子组件内 因为不能直接传数组,要传值 -->
<menus v-for="(item,index) in menuData" :key="index" :menu="item" />
</el-menu>
</div>
</template>
<script>
import menus from "./navitem";
export default {
data() {
return {
menuData: [
{
id: 1,
path: "/a",
name: "AdminIndex",
nameZh: "首页",
iconCls: "el-icon-s-home",
component: "AdminIndex",
parentId: 0,
children: null
},
{
id: 2,
path: "/admin",
name: "User",
nameZh: "用户管理",
iconCls: "el-icon-user",
component: "AdminIndex",
parentId: 0,
children: [
{
id: 6,
path: "/admin/user/profile",
name: "Profile",
nameZh: "用户信息",
iconCls: null,
component: "user/UserProfile",
parentId: 2,
children: null
},
{
id: 7,
path: "/admin/user/role",
name: "Role",
nameZh: "角色配置",
iconCls: null,
component: "user/Role",
parentId: 2,
children: null
}
]
},
{
id: 3,
path: "/d",
name: "Content",
nameZh: "内容管理",
iconCls: "el-icon-tickets",
component: "AdminIndex",
parentId: 0,
children: [
{
id: 9,
path: "/d/content/department",
name: "Department",
nameZh: "就业部类",
iconCls: null,
component: "content/department",
parentId: 3,
children: null
},
{
id: 10,
path: "/d/content/student",
name: "Student",
nameZh: "学生类",
iconCls: null,
component: "content/student",
parentId: 3,
children: [
{
id: 20,
path: "/d/content/student/graduateInfo",
name: "graduateInfo",
nameZh: "毕业生信息",
iconCls: null,
component: "content/student/graduateInfo",
parentId: 10,
children: null
}
]
},
{
id: 11,
path: "/d/content/enterprise",
name: "Enterprise",
nameZh: "企业类",
iconCls: null,
component: "content/enterprise",
parentId: 3,
children: null
}
]
},
{
id: 4,
path: "/n",
name: "System",
nameZh: "系统管理",
iconCls: "el-icon-s-tools",
component: "AdminIndex",
parentId: 0,
children: [
{
id: 12,
path: "/n/system/run",
name: "Run",
nameZh: "运行情况",
iconCls: null,
component: "system/run",
parentId: 4,
children: null
},
{
id: 13,
path: "/n/system/data",
name: "Data",
nameZh: "备份恢复数据库",
iconCls: null,
component: "system/data",
parentId: 4,
children: null
},
{
id: 14,
path: "/n/system/log",
name: "Log",
nameZh: "操作日志",
iconCls: null,
component: "system/log",
parentId: 4,
children: null
}
]
},
{
id: 5,
path: "/admin1",
name: "Link",
nameZh: "链接",
iconCls: null,
component: "AdminIndex",
parentId: 0,
children: null
}
]
};
},
components: {
menus
}
};
</script>
<style lang="scss" scoped>
.navleft {
overflow: hidden;
}
.navtitle {
color: #fff;
font-size: 18px;
}
/deep/.el-menu {
border-right: none;
}
</style>
子组件
<template>
<div>
<!-- 无子集 -->
<!-- index放url可以在路由开始后直接点击跳转,不需要在一个个设置
因为这边是数据path对应的跳转路由
-->
<el-menu-item v-if="!menu.children" :index="menu.path">
<!-- <i :class="menu.icon"></i> -->
<span slot="title">{{menu.name}}</span>
</el-menu-item>
<!-- 有子集 -->
<!-- index放url可以在路由开始后直接点击跳转,不需要在一个个设置
因为这边是数据path对应的跳转路由
-->
<el-submenu v-else :index="menu.path">
<template slot="title">
<i :class="menu.icon"></i>
<span>{{menu.name}}</span>
</template>
<menus v-for="(item,index) in menu.children" :menu="item" :key="index"></menus>
</el-submenu>
</div>
</template>
<script>
export default {
name: "menus",
props: ["menu"]
};
</script>
<style lang="scss" scoped>
</style>
// 1,后端给个导航栏的数据
// 2,创建一个子组件并注册在父组件内
// 3,在父组件创建一个空数组,利用生命周期加载后自动把后端的数据存到空数组内。
// 4,把父组件的数组传给子组件,因为不能直接传数组,要传值,所以通过在父组件内的子组件上for循环把每一项作为值传过去。
// 5,子组件判断用不用submenu,用v-if判断,条件是接收到的数组也就是menu(代表每一项)是否有children(子级),有就用submenu没有就item。
// 6,子组件内index用menu.url。因为开启路由模式为true后可以让index内的地址直接用于跳转,免得后期一个个加。
// 7,子组件内submenu内放子组件(name名字)自己调用自己,渲染出二级菜单,想要自己调用自己,需要给组件一个name取名字,用名字当标签名渲染。
//整理:通过获取后端数据到数组,然后循环数组把内容渲染到页面,中间通过if看有无子级 判断有就submenu(二级菜单)没有就直接渲染(一级菜单)。