| 根據運行的環境，操作系統可以分為桌面操作系統，手機操作系統，服務器操作系統，嵌入式操作系統等。 
我們公司目前正在使用VUE作為后臺管理系統，該系統根據用戶權限顯示不同的左菜單. 界面將根據用戶權限返回不同的菜單名稱和URL. 前端將動態添加這些菜單名稱和URL. 在系統左側，此處使用vue-router2.2添加的router.addRouter（routes）方法. 但是接口返回給我的只是鍵值對的普通數組js遍歷多維數組，而vue-router需要固定格式的路由js遍歷多維數組，因此我只能自己將普通數組轉換為路由. 具體代碼如下:
let json = [
{
"id": 64,
"code": "565",
"name": "共和國",
"label": "共和國",
"parentId": 0,
"type": 2,
"seq": 0,
"url": "/public",
"description": "同意",
"children": []
},
{
"id": 1,
"code": "sys_mgnt",
"name": "系統管理",
"label": "系統管理",
"parentId": 0,
"type": 1,
"url": "/system",
"seq": 1,
"description": "aaa",
"children": [
{
"id": 28,
"name": "測試二級菜單1",
"label": "測試二級菜單1",
"parentId": 1,
"type": 1,
"url": "/add",
"seq": 1,
"description": "測試二級菜單的描述",
"children": [
{
"id": 288,
"name": "三級菜單1",
"label": "三級菜單1",
"parentId": 11,
"type": 1,
"url": "/add1",
"seq": 1,
"description": "三級菜單1的描述",
"children": []
}
]
},
{
"id": 30,
"name": "新增角色管理",
"label": "新增角色管理",
"parentId": 1,
"type": 2,
"seq": 1,
"description": "新增角色管理的描述",
"children": []
},
{
"id": 31,
"name": "add角色管理",
"label": "add角色管理",
"parentId": 1,
"type": 1,
"seq": 1,
"description": "add角色管理的描述",
"children": []
},
{
"id": 3,
"code": "ro_mgnt",
"name": "角色管理",
"label": "角色管理",
"parentId": 1,
"type": 1,
"url": "",
"seq": 2,
"children": [
{
"id": 32,
"name": "可以成功",
"label": "可以成功",
"parentId": 3,
"type": 2,
"url": "/ctrl",
"seq": 1,
"description": "能成功嗎的描述",
"children": []
}
]
}
]
}
]
let routerArr = JSON.parse(JSON.stringify(json));
function formatRoutes(routerArr){
const arr = [];
let obj = {};
routerArr.forEach(router => {
const tmp = { ...router };
if(tmp.type == 1){ //只篩選出type=1的項
if (tmp.children) {
tmp.children = formatRoutes(tmp.children);
const {url, children, type} = router;
obj = {
path: tmp.url,
name: tmp.name,
meta: {title: tmp.name},
children: tmp.children
}
}
arr.push(obj);
}
})
return arr;
}
let routers = formatRoutes(routerArr);
console.log(routers);
輸出為:
顯然，這已經符合基本的路由方式，但是在每個路由配置中僅缺少一個組件，因此即使我們通過遞歸遍歷生成了所需的數組，數組也返回給了我們，但仍然無法滿足前端的配置要求，個人建議接口返回固定的路由配置格式，返回的路由應該是已經預先配置好的前端，否則我們組件的路徑是什么？否則，我們要跳轉到哪里？但這不是本文的重點！
js遞歸地遍歷多維數組，并在修改數組鍵后返回新的多維數組DEMO（返回的結果可以在瀏覽器控制臺中查看）
本文來自本站，轉載請注明本文網址：
http://www.pc-fly.com/a/jisuanjixue/article-253006-1.html
|
