H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】手把手教你如何动态生成路由菜单

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

本文地址:H5W3 » 【前端技术】手把手教你如何动态生成路由菜单

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址