其實權限這個問題，一直困擾了我很久，但是前幾個項目都是用的比較簡單粗暴，現在想著，這會又用到了，所以想把這個東西優化一下，改為通用的，下面是我的方法，
第一步:本地生成一張完整的路由表

這里解釋 一下里面相關的參數含義：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