乐趣区

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

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

退出移动版