vue-element-admin改为后端获取路由，把后端返回的多维数组转为对应菜单？

Question

后端数据：

```javascript
{
"mid": 38,
"name": "系统管理",
"pid": 0,
"button": [],
"isHas": 1,
"sonData": [
{
"mid": 39,
"name": "菜单管理",
"pid": 38,
"button": [],
"isHas": 1,
"sonData": [
{
"mid": 40,
"name": "菜单列表",
"pid": 39,
"button": [
{
"code": "menu_add",
"name": "添加",
"isHas": 1
},
{
"code": "menu_edit",
"name": "编辑",
"isHas": 1
},
{
"code": "menu_del",
"name": "删除",
"isHas": 1
}
],
"isHas": 1,
"sonData": []
}
]
},
{
"mid": 41,
"name": "角色管理",
"pid": 38,
"button": [],
"isHas": 1,
"sonData": [
{
"mid": 42,
"name": "角色列表",
"pid": 41,
"button": [
{
"code": "role_add",
"name": "添加角色",
"isHas": 0
},
{
"code": "role_edit",
"name": "角色编辑",
"isHas": 0
},
{
"code": "role_del",
"name": "角色删除",
"isHas": 0
},
{
"code": "auth_add",
"name": "角色赋权限",
"isHas": 0
}
],
"isHas": 1,
"sonData": []
}
]
},
{
"mid": 43,
"name": "员工管理",
"pid": 38,
"button": [],
"isHas": 1,
"sonData": [
{
"mid": 44,
"name": "员工列表",
"pid": 43,
"button": [
{
"code": "user_add",
"name": "添加用户",
"isHas": 0
},
{
"code": "user_edit",
"name": "用户编辑",
"isHas": 0
},
{
"code": "user_del",
"name": "删除用户",
"isHas": 0
}
],
"isHas": 1,
"sonData": []
}
]
}
]
}

```怎么转化匹配菜单？

Answer 1

思路是这样的，首先vue-element-admin下载下来的demo是可以正常显示菜单的，此时找到渲染菜单的组件，输出菜单渲染变量的整个数据，这个是你需要参考的最终接口过来的菜单数据需要组装成的样子。然后由于demo中菜单是静态的，你是接口来的，所以拼接好菜单后需要通过router.addRoutes动态路由