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

写这篇文章主要是最近在准备后台管理系统的改版调研，想到了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"></tree-folder-content>
        </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"></tree-folder>
                <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()方法动态推入路由列表。