乐趣区

手把手教你如何动态生成路由菜单

jiezi

先说说 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 就行了。

退出移动版