vue menu菜单动态获取数据
template部分
//当前被激活的菜单的文字颜色
//如果只有一级 没有子菜单
{{ child1.name }} //显示菜单名称
//如果有子菜单
{{ child1.name }}
{{ child2.name }}
或者
{{ item.name }}
{{ child.name }}
{{ item.name }}
js部分
export default {
name: "NavHeader",
data() {
return {
activeIndex: 'PageHome',
menuList:[
{
"name":"监控总览",
"pid":0,
"id":1,
"url":"PageHome",
},
{
"name":"设备管理",
"pid":0,
"id":2,
"url":"equipmentManagement",
"childNode":[
{
"name":"北斗终端",
"pid":2,
"id":200,
"url":"BDManagement",
},
{
"name":"接收机",
"pid":2,
"id":201,
"url":"ReceiverMana",
},
{
"name":"指挥机",
"pid":2,
"id":202,
"url":"CommandMana",
}
]
},
{
"name":"统计分析",
"pid":0,
"id":3,
"url":"statisticalAnalysis",
"childNode":[
{
"name":"终端在线",
"pid":3,
"id":300,
"url":"TerminalOnline",
},
{
"name":"线路负载",
"pid":3,
"id":301,
"url":"LineLoad",
},
{
"name":"数据包",
"pid":3,
"id":302,
"url":"DataPackage",
},
{
"name":"数据帧",
"pid":3,
"id":303,
"url":"DataFrame",
},
{
"name":"排队包数",
"pid":3,
"id":304,
"url":"QueueNumber",
}
]
},
{
"name":"系统管理",
"pid":0,
"id":4,
"url":"systemManage",
"childNode":[
{
"name":"用户管理",
"pid":4,
"id":400,
"url":"HtUser",
},
{
"name":"角色管理",
"pid":4,
"id":401,
"url":"HtRole",
},
{
"name":"巡检管理",
"pid":4,
"id":402,
"url":"InspectionHistory",
},
{
"name":"字典管理",
"pid":4,
"id":403,
"url":"dictionaryManage",
},
{
"name":"服务监控",
"pid":4,
"id":404,
"url":"serviceControl",
},
{
"name":"日志管理",
"pid":4,
"id":405,
"url":"lodManage",
},
{
"name":"菜单管理",
"pid":4,
"id":406,
"url":"HtMenu",
},
{
"name":"系统配置",
"pid":4,
"id":407,
"url":"SysConfiguration",
},
{
"name":"组织管理",
"pid":4,
"id":408,
"url":"organizeManage",
}
]
}
]
};
},
computed: {
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
};样式部分