先说说vue 里面如何生成呀。
vue 因为组件可以自调用。所以生成非常简单。
<template> <div> <div v-for="item in list" :key="item.name"> {{item.name}} <Menu v-if="item.children&&item.children.length" :list="item.children"></Menu> </div> </div></template><script> export default { name: 'Menu', props: { list: Array } }</script>然后如果就用原生的js生成的话，
这边用到一个简单的遍历算法。
大概意思我稍微说下，
假如现在有一个数组，它是这样的。
const arr = [ { name: '1', children: [ { name: '1_1', children: [ {name: '1_1_1', children: [{name: '1_1_1_1'}]} ] }, { name: '1_2', children: [{name: '1_2_1'}] } ] }, {name: '2', children: [{name: '2_1'}]} ]这个结构应该还是比较清晰的。一共是两大层，看数字就可以了。 最多的那个有四层。
现在我写个方法把这个数组遍历一遍，这边写两个吧，生成路由使用广度优先（就是优先1,2，然后1_1,2_1....） 。
深度优先遍历： function deep(arr) { let arr_ = [...arr]; // 虚假的深拷贝一下，防止破坏原结构，待会儿广度还要用。 while(arr_.length) { const l = arr_.shift(); // 获取当前最靠前的一个对象,并把它从arr_里面剔除掉 console.log(l.name);// 打印一下他的名字，证明他存在过 if(l.children) arr_ = [...l.children, ...arr_];// 然后如果他有子集， 就把他的子集拉到 最前面去分析 } } deep(arr); //不复制粘贴... 广度优先遍历 // 复制粘贴代码了，就一行改一下 function wide(arr) { let arr_ = [...arr]; // 虚假的深拷贝一下，防止破坏原结构，待会儿广度还要用。 while(arr_.length) { const l = arr_.shift(); // 获取当前最靠前的一个对象,并把它从arr_里面剔除掉 console.log(l.name);// 打印一下他的名字，证明他存在过 if(l.children) arr_ = [...arr_, ...l.children];// 然后如果他有子集， 就把他的子集拉到 后面去排队，等待分析 } } wide(arr); //不复制粘贴...区别就是到底是先分析先前已经加进来的，还是先分析后来才加进来的。或者说先进后出还是先进先出。
生成菜单的话深度广度都行，在每次遍历的时候console.log 换成 xx = document.createElement 然后 appendChild 就行了，最好是加个parent属性，然后就可以根据parent的名字，准确寻找dom,然后append就行了。