Vue + iview实现动态添加路由 + 动态侧边栏

碰到的动态路由问题，由于我是小白，网上搜的看不懂，就用自己的方式实现了，毛病弊端什么的肯定有，但是最起码靠自己的双手给实现了。麻烦各位大佬看看有什么问题，以及动态路由正确的 一般的写法以及逻辑

router index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import axios from 'axios'
axios.defaults.baseURL = 'http://gank.io/api';
Vue.use(VueRouter)



let routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: '退出',
    component: () => import(/* webpackChunkName: "about" */ '../views/login.vue')
  },

]


const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
let routerArr = []
router.beforeEach((to, form, next) => {
  if(to.name !== '退出' && routerArr.length ===0) {
    axios.get('http://gank.io/api/data/福利/20/1').then((res)=>{
    console.log(res)
    let data = [
      {
        "id": 184,
        "parentId": null,
        "iconClass": "fa fa-link",
        "url": "/datamanage",
        "name": "datamanage",
        "menuName": "datamanage",
        "title":"大数据后台管理"
      },
      {
        "id": 207,
        "parentId": 184,
        "iconClass": "fa fa-link",
        "url": "transfertask",
        "name": "transfertask",
        "menuName": "transfertask",
        "title":"传输任务管理"
      },
      {
        "id": 187,
        "parentId": 184,
        "iconClass": "fa fa-link",
        "url": "authority",
        "name": "authority",
        "menuName": "authority",
        "title":"权限管理"
      },
      {
        "id": 185,
        "parentId": 184,
        "iconClass": "fa fa-link",
        "url": "usermanage",
        "name": "usermanage",
        "menuName": "usermanage",
        "title":"用户管理"
      },
      {
        "id": 235,
        "parentId": null,
        "iconClass": "fa fa-link",
        "url": "/taskrun",
        "name": "taskrun",
        "menuName": "taskrun",
        "title":"任务运行时"
      },
      {
        "id": 212,
        "parentId": null,
        "iconClass": "fa fa-link",
        "url": "/node",
        "name": "node",
        "menuName": "node",
        "title":"节点"
      },
      {
        "id": 219,
        "parentId": null,
        "iconClass": "fa fa-link",
        "url": "/task",
        "name": "task",
        "menuName": "task",
        "title":"任务"
      },
      {
        "id": 228,
        "parentId": null,
        "iconClass": "fa fa-link",
        "url": "/parameter",
        "name": "parameter",
        "menuName": "parameter",
        "title":"任务参数"
      }
    ]
    let parentRoute = data.filter(i => { return i.parentId === null })
    parentRoute.map(item => {
        item.children = [...data.filter(k => {return k.parentId === item.id})]
    })
    new Promise(resolve => {
      parentRoute.map((item, k) => {
        if(item.children) {
          routerArr[k] = {
            id: item.id,
            path: item.url,
            name: item.title,
            children: []
          }
          item.children.map(i => {
            routerArr[k].children.push({id: i.id,path:i.url,name:i.title})
          })
        }else {
          routerArr[k] = {
            id: item.id,
            path: item.url,
            name: item.title,
          }
        }
      })
      resolve(routerArr)
    }).then(addRoute => {
      router.options.routes=[...router.options.routes,...addRoute]
      next()
    })
  })
  }else if(to.name === 'login'){
    routerArr = []
    next()
  }else {
    next()
  }

});

export default router

App.vue

<template>
  <div id="app">
    <div id="nav">
        <Menu :theme="theme2" v-if="status">
          <div v-for="(item, key) in routerArr" :key="item.name">
            <Submenu :name="key" v-if="item.children ? item.children.length !==0 ? true : false : false">
                <template slot="title">
                    <Icon type="ios-paper" />
                    {{item.name}}
                </template>
                <MenuItem :name="key+'-'+k" v-for="(child,k) in item.children" :key="child.url" :to="child.path" >{{child.name}}</MenuItem>
            </Submenu>
            <MenuItem :name="key" v-else :to="item.path">
              <Icon type="md-document" />
              {{item.name}}
            </MenuItem>
          </div>
      </Menu>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data(){
    return {
      theme2: 'light',
      routerArr: [],
      status: false
    }
  },
  created(){
    this.routerArr = this.$router.options.routes
  },
  watch: {
    '$route'(newVal){
      if(newVal.name !== '退出') {
        this.status = true
        this.routerArr = this.$router.options.routes
      }else {
        this.status = false
        this.routerArr = this.$router.options.routes
      }
    }
  }
}
</script>

<style lang="less">

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

/deep/.ivu-menu-item {
  text-align: left;
}
/deep/.ivu-menu-submenu {
  text-align: left;
}
</style>

我也不知道这样合理不合理，但是最起码的是功能、要求实现了，还望各位大佬看见后不要嘲笑小弟，顺便教教我应该怎么写，思路逻辑是什么的。小弟提前谢谢各位大佬了。 [ 抱拳 ]