根據後臺返回選單資料生成前端路由時，路徑拼接的做法

阿新 • • 發佈：2021-07-09

需求：後臺返回的資料，根據名稱name查詢路由訪問的完整路徑；後臺像下面格式返回，前端可以直接用，後臺也直接控制了前端路由；

後臺返回資料示例:

 1 var arr = [{
 2     name: '1',//一級選單
 3     path: '/1',
 4     meta: {
 5         title: '1'
 6     },
 7     components: '1',
 8     children: [{
 9         name: '11',//二級選單
10         path: '11',
11         meta: {
12             title: '11'
13 
         },
14         components: '11',
15     }]
16 }, {
17     name: '2',//一級選單
18     path: '/2',
19     meta: {
20         title: '2'
21     },
22     components: '2',
23     children: [{
24         name: '21',//二級選單
25         path: '21',
26         meta: {
27             title: '21'
28         },
29 
         components: '21',
30         children: [{
31             name: '211',//三級選單
32             path: '211',
33             meta: {
34                 title: '211'
35             },
36             components: '211',
37             children: [{
38                 name: '2111',//四級選單
39                 path: '2111',
 
40                 meta: {
41                     title: '2111'
42                 },
43                 components: '2111',
44             }]
45         }]
46     }]
47 }]

例如：

選單名為11的當前路徑是11，頁面跳轉需要的完整路徑是 /1/11

選單名為2111的當前路徑是2111，頁面跳轉需要的完整路徑是 /2/21/211/2111

第一步：找到當前路徑

function find(list){
    let path = '' //要返回的完整路徑
    for(var i=0;i<list.length;i++){
        if(list[i].meta.title==='2111'){//找到了就返回 
            path = list[i].path
            return path
        }else{//沒找到去看子集裡面是否有，沒有就下一個迴圈
            if(list[i].children){
                var a = find(list[i].children)
                if(a){
                    path = a
                    return path
                }
            }
        }
    }
}

find(arr) //返回 2111,只是選單名為2111的當前路徑

第二步：嘗試把父元件路徑和當前元件路徑拼接起來

 1 function find(list,fpath){// fpath為父元件路徑
 2     let path = '' //要返回的完整路徑
 3     for(var i=0;i<list.length;i++){
 4         if(list[i].meta.title==='2111'){//找到了就返回
 5             //path = list[i].path
 6             path = fpath + (fpath?'/':'') + list[i].path
 7             return path
 8         }else{//沒找到去看子集裡面是否有，沒有就下一個迴圈
 9             if(list[i].children){
10                 //var a = find(list[i].children)
11                 var a = find(list[i].children,list[i].path)//將當前元件的父元件的路徑 list[i].path 傳過去
12                 if(a){
13                     path = a
14                     return path
15                 }
16             }
17         }
18     }
19 }
20 
21 find(arr) //返回 211/2111 ，返回了父元件和當前元件拼接的路徑

第三步：拼接所有祖先元件的路徑，不管chilren巢狀多深，都能返回這一鏈路的完整路徑

 1 function find(list){
 2     let arr = Array.prototype.slice.call(arguments)
 3     arr.shift()//得到傳過來的所有祖先元件的路徑  如選單2111的祖先資料是[211,21,/2]
 4     let path = '' //要返回的完整路徑
 5     for(let i=0;i<list.length;i++){
 6         if(list[i].meta.title==='2111'){//找到了就返回
 7             //path = list[i].path
 8             //path = fpath + (fpath?'/':'') + list[i].path
 9             for(let j=arr.length-1;j>=0;j--){//循壞倒序遍歷祖先路徑資料
10                 path += arr[j] + (arr[j]?'/':'')
11             }
12             path += list[i].path  //拼接為 /2/21/211/2111
13             return path
14         }else{//沒找到去看子集裡面是否有，沒有就下一個迴圈
15             if(list[i].children){
16                 //var a = find(list[i].children)
17                 //var a = find(list[i].children,list[i].path)//將當前元件的父元件的路徑 list[i].path 傳過去
18                 var a = find(list[i].children,list[i].path,...arr)//將當前元件的祖先元件的路徑傳過去
19                 if(a){
20                     path = a
21                     return path
22                 }
23             }
24         }
25     }
26 }
27 
28 find(arr) // 返回 /2/21/211/2111