其实权限这个问题，一直困扰了我很久，但是前几个项目都是用的比较简单粗暴，现在想着，这会又用到了，所以想把这个东西优化一下，改为通用的，下面是我的方法，
第一步:本地生成一张完整的路由表

这里解释 一下里面相关的参数含义：id是后台返回的权限id,url是对应的路由路径，后面需要进行拼接，children是此路由是否有子路由的意思，如果没有则为空，具体代码如下方便复制：

const getRouteTree = function () {
    var arr = [
        { id: 1,url: '/single/ruleManage/ruleManage',children: [
                { id: 11, url: '/single/ruleManage/allShow' },
                { id: 12, url: '/single/ruleManage/newCule' },
                { id: 13, url: '/single/ruleManage/onGoging' },
                { id: 14, url: '/single/ruleManage/booked' },
                { id: 15, url: '/single/ruleManage/pickedCar' },
            ]
        },
        { id: 2, url: '/single/reachShopManage/reachshoplist',children: [] },
        { id: 3, url: '/single/auditManage/auditmanage', children: [
                { id: 16, url: '/single/auditManage/auditallshow' },
                { id: 17, url: '/single/auditManage/auditdefeat' },
                { id: 18, url: '/single/auditManage/auditinvalid' },
            ]
        },
        { id: 4, url: '/single/potentManage/potentmanage', children: [
            { id: 19, url: '/single/potentManage/potentshow' },
            { id: 20, url: '/single/potentManage/potentdefeat' },
            { id: 21, url: '/single/potentManage/potentinvalid' },
            ]
        },
        { id: 5,  url: '/single/followRecord/followrecordlist', children: [] },
        { id: 6, url: '/single/compreQuery/comprequerylist',children: [] },
        { id: 7, url: '', children: [] },//数据分析
        { id: 8, url: '/single/powerManage/powermanage', children: [
                {
                    id: 22,
                    url: '/single/powerManage/employepower', 
                    children: [
                        { id: 24, url: '/single/powerManage/employemanage',children:[] },
                        { id: 25, url: '/single/potentManage/rolemanage',children:[] },
                    ]
                },
                { id: 23, url: '/single/potentManage/grouppower' },
            ]
        },//权限管理
        { id: 9, url: '', children: [] },//系统设置
        { id: 10, url: '', children: [] },//个人中心

    ];//权限路由表
    var permissions = [1,2,3,4,5,6,7,8,9,20,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];//后台返回的权限id

    var defaultArr = [
        {
            path: '/',
            redirect: '/single/layout/main'
        },
        {
            path: '/single/layout/main',
            component: resolve => require(['@/components/single/layout/main.vue'], resolve),
            children:loop2(loop(arr,permissions)),//根据新的路由表生成的路由树
        }
    ];
    return defaultArr;
}

第二步：我们需要根据后台返回的权限id,生成我们需要的权限路由表，主要就是一个嵌套循环
代码如下：

const loop = function(arr, p) {
    var a1 = [];
    for(let i in arr) {
        var id = arr[i].id;
        var children=arr[i].children;
        if(p.indexOf(id) > -1) {
            var element = {
                "id":id,
                "url":arr[i].url
            }
            if (children instanceof Array && children.length > 0) {
                let cc = loop(children, p);
                element.children = cc;
            }
            a1.push(element);
        }   
    }
    return a1;
}

第三步：根据第二步返回的权限路由表，生成我们正常的那种路由树

const loop2 = function (data) {
    let newArr = [
        {
            'path': '/',
            'redirect': data[0].url
        }
    ];
    for (let i in data) {
        let  temp = {
                'path': data[i].url,
                'component': resolve => require(['@/components' + data[i].url + '.vue'], resolve),
            }
        if(data[i].children instanceof Array && data[i].children.length > 0){
                let cc = loop2(data[i].children);
               // cc.unshift( {path: '/', redirect: data[i].children[0].url });
                temp.children = cc;
        }
       newArr.push(temp);
        }
    return newArr;
}
}

最终的效果如下：

最终需要调用一下啦

 this.$router.addRoutes(this.common.getRouteTree());

哈哈,over