当前位置:首页 > vue递归实现级联菜单 vue2.x

vue递归实现级联菜单 vue2.x

发布于 2019-04-26 阅读 302 次 Vue Javascript

写这篇文章主要是最近在准备后台管理系统的改版调研,想到了vue+elementui+router+vux+vuecli,然后后台侧边栏菜单涉及到两个问题,一个是级联菜单(我希望实现无限级联菜单,这样一劳永逸)另一个是权限问题。
说说我的解决思路:

级联菜单的思路

我打算用vue官方提供的递归组件来实现,官方说的很清楚,但是代码只写出来关键部分这里我自己写了一个例子,挺好用的。下面贴出代码:
index.vue

<template>
    <div class="wp50">
        <tree-folder :folder="folders"></tree-folder>
    </div>
</template>
<style>
    .mb20{margin-bottom:20px;}
    .wp50{width:50%;margin:0 auto;}
</style>
<script>
    import treeFolder from '@/modules/tree-folder.vue'
    export default{
        data(){
            return{
                folders: {
                    name:'全部',
                    children:[
                        {
                            name:'一级标题1',
                            children:[
                                {
                                    name:'二级标题1',
                                    children:[
                                        {
                                            name:'三级标题1'
                                        },
                                        {
                                            name:'三级标题2'
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            name:'一级标题2'
                        },
                        {
                            name:'一级标题3'
                        }
                    ]
                }
            }
        },
        components:{
            treeFolder
        }
    }
</script>


tree-folder.vue

<template>
    <div>
        <p>
            <span>{{ folder.name }}</span>
            <tree-folder-content :children="folder.children"/>
        </p>
    </div>
</template>
<style>
    .mb20{margin-bottom:20px;}
    .wp50{width:50%;margin:0 auto;}
</style>
<script>
    export default{
        props:{
            folder:Object
        },
        data(){
            return {
                
            }
        },
        beforeCreate: function () {

        },
        name:'treeFolder',
        components:{
            treeFolderContent: () => import('@/modules/tree-folder-content.vue')
        }
    }
</script>


tree-folder-content.vue

<template>
    <div>
        <ul>
            <li v-for="child in children" :key="index">
                <tree-folder v-if="child.children" :folder="child"/>
                <span>{{ child.name }}</span>
            </li>
        </ul>
    </div>
</template>
<style>
    .mb20{margin-bottom:20px;}
    .wp50{width:50%;margin:0 auto;}
</style>
<script>
import treeFolder from '@/modules/tree-folder.vue'
    export default{
        props:{
            children:Array
        },
        data(){
            return {

            }
        },
        name:'treeFolderContent',
        components:{
            treeFolder
        }
    }
</script>

路由权限思路

关于权限这块我还没有写(所以这里只说思路,因为代码我还没写完,有了思路,相信都自己研究一下子应该能写出来)
我想的是,默认情况下路由列表只有登录路由和首页路由,将其他路由列表以json的形式存入后台数据库,这样登录的时候后台根据用户权限返回路由列表,然后用addRouts()方法动态推入路由列表。