关于vue路由的问题

点击菜单，触发的是element-menu的路由，会将绑定的index作为路径来进行跳转。

目前有两个js文件，一个是记录所有路由的index.js，一个是记录菜单allTab.js。
前者决定每个路由路径对应的组件，后者决定侧边栏渲染的菜单。当点击菜单时，会转到路由中去匹配对应的组件进行渲染。

现在的问题是，菜单组件由分菜单+子菜单组成，因此allTab中记录格式为分菜单及其子菜单，譬如这样

export default {
    path: "/swManager", name: "swManager",
    meta: {title: '软件管理', role: 300, icon: 'management'},
    children: [
        {
            path: "maintenance",
            name: "AssetOnlineMaintain",
            meta: {
                title: "软件维护",
                icon: "Monitor",
                role: 328
            }
        }]
}

但是问题来了，路由内的导航都是平级的

    {
        path: "/swManager", name: "swManager",
        meta: {title: '软件管理', role: 300, icon: 'management'},
        //beforeEnter: (to, from) => {
        //    return false
        //},
    },{
        path: "/swManager/softDefine",
        name: "Asset", component: softDefine,
        meta: {
            title: "软件定义",
            icon: "discount",
            role: 304
        },
    },

因为如果同样采取一样的结构去存储的话，父组件这里就必须要有组件component，否则靠路由守卫直接给拒绝访问（但是如果拒绝的话，又无法跳转到它的子路由去了！）

我想要的是有什么方法，把路由这边的结构弄成和菜单栏allTab那样带父子分级的，因为后续分菜单也要渲染，从后台获取到权限数组后要根据结果加路由和对应菜单组件。如果数据结构一致的话就可以直接把路由转给菜单去渲染了。
或者说路由全部平级也可以，后台获取到权限数组后，要怎么去遍历全路由来生成新路由呢？
譬如数组是[1,300,301]，是要这么写吗？双层for循环，这里的权限是对应菜单的权限，就是是否显示。

//routes:全路由; arr:权限数组;
for(let k in routes){
    for(let num in arr){
        if(arr[num] === routes[k].role) {
            this.newRoutes.push(routes[k])
            break
        }
    }
}

之后转成alltab的父子分级再想想办法怎么搞