树形数据的无限级别（递归实现）

树形数据的菜单路由无限级别（递归实现）

从后台获取到数据根据前端的需要重组数据，因为后端没有component所以得依据后端数据匹配前端的路由拿到component

下面是两个模拟的数据

// 模拟后端的数据
	let ceshi = [
					{
						 name: '电脑',
						 val:'a',
						 children: [
						     {
						         name: 'F盘',
								 val:'b',
								children:[
									{
										name: '照片',
										val: 'c',
										children:[
											{
												name: '照片1',
												val: 'c1',
												children:[
													{
														name: '照片2',
														val: 'c2',
														children:[
															{
																name: '照片3',
																val: 'c3',
															},
															{
																name: '照片4',
																val: 'c4',
															}
														]
													}
												]
											}
										]
									}
								]
							 },
						]
					},
					{
						 name: 'E盘',
						 val:'d',
					    children:[
							{
								 name: 'bb',
								 val:'f',
								 key:'5',
							    children:[
									{
										 name: 'bb',
										 val:'f',
										 key:'5',
									    children:[]
									}
								]
							}
						]
					}
				];

//模拟前端的数据
key代表component
	let ceshi1 = [{
				    name: '电脑',
					val:'a',
					key:'1',
				    children: [
				        {
				            name: 'F盘',
							 val:'b',
							 key:'2',
				            children: [
				                {
				                    name: '照片',
									 val:'c',
									 key:'3',
				                    children:[
				                    	{
				                    		name: '照片1',
				                    		val: 'c1',
											key:'4',
				                    		children:[
				                    			{
				                    				name: '照片2',
				                    				val: 'c2',
													key:'5',
				                    				children:[
				                    					{
				                    						name: '照片3',
				                    						val: 'c5',
															key:'6',
				                    					},
														{
															name: '照片4',
															val: 'c4',
															key:'7',
														}
				                    				]
				                    			}
				                    		]
				                    	}
				                    ]
				                },
				            ]
				        }
				    ]},
					{
					    name: 'E盘',
						val:'d',
						key:'4',
						children:[
							{
								 name: 'bb',
								 val:'f',
								 key:'5',
							    children:[
									{
										 name: 'bb',
										 val:'f',
										 key:'5',
									    children:[]
									}
								]
							}
						]
					},
					{
						 name: 'bb',
						 val:'f',
						 key:'5',
					    children:[]
					}
				]
数据都准备完成，下面是递归的方法，不知道为什么 第一个chong递归的方法就已经完成了能把key都赋值上去了，但有时候会把所有数据返回来，但是里面没有key。为了解决这个所以我又用了again这个递归把没有key的去掉，这样就是前端需要展示的路由数据了。
function chong(root,yuanshi){
					if(root.length<=0) return;
					for(let i=0;i<root.length;i++){
						for(let j=0;j<yuanshi.length;j++){
							if(root[i].val === yuanshi[j].val){
								if(root[i].children&&root[i].children.length>0){
								  chong(root[i].children,yuanshi[j].children)
								}
								// console.log(root[i].val,"root[j]")
								root[i].key = yuanshi[j].key;
							}
							
						}
						
					}
				}
				chong(ceshi,ceshi1);
				function again(root) {
					if(root.length<=0) return;
					root.forEach((item,index)=>{
						if(item.children&&item.children.length>0){
							again(item.children)
						}
						if(!item.key){root.splice(index,1)}
					})
				}
				again(ceshi);
				console.log(ceshi,"ceshi1")

这是打出来的结果（我把照片3的val后台模拟是c3 前端是c5，两个不相等所以我把没要的去掉了）；这样就可以动态设置数据了

下面是实际项目中的 这是用在后台管理系统上的vueX里面的

      routers(store,data){
            return new Promise((resolve,reject)=>{
                allowMenuList().then(res=>{
                    res.data.sort(function (a,b) {
                        return (+a.sid)-(+b.sid);
                    })
                    function chong(root,yuanshi){
                        if(root.length<=0) return;
                        for(let i=0;i<root.length;i++){
                            for(let j=0;j<yuanshi.length;j++){
                                if(root[i].name === yuanshi[j].name){
                                    if(root[i].children&&root[i].children.length>0){
                                        chong(root[i].children,yuanshi[j].children)
                                    }
                                    // console.log(root[i].val,"root[j]")
                                    root[i] = yuanshi[j];
                                }

                            }

                        }
                    }
                    chong(res.data,routes);
                    function again(root) {
                        if(root.length<=0) return;
                        root.forEach((item,index)=>{
                            if(item.children&&item.children.length>0){
                                again(item.children)
                            }
                            if(!item.component){root.splice(index,1)}
                        })
                    }
                    again(res.data);
                    let arr = [];
                    arr = res.data; //这是最终的数据
                    store.commit('routers', arr);
                    resolve(arr)
                }).catch(err=>{
                    reject(err)
                })
            })
        },

这是实际项目中的效果