vue管理平台的动态路由（后台传递路由，前端拿到并生成侧边栏）

前端的路由从后台获取，包括权限；

大体步骤包括：路由拦截（钩子函数）---->后台获取路由数据 ----> 保存到本地或vuex中.

在router-->index.js中：

 router.beforeEach((to, from, next) => { //拦截处一定要else{}
     // 加载动态菜单和路由
     if (to.path === '/') {
         addDynamicMenuAndRoutes(to, from)
         console.log(router.options.routes);
         next()
     } else {
         if (store.state.menu.navTree) {
             addDynamicMenuAndRoutes(to, from)
         }
         next()
     }
 })

一个Tip，钩子函数一定要记得else{},就这个小问题找了半天，各种排除。。。

我这里没有登录验证，所以通过path来判断是否加载动态路由；

下面的判断是由于vuex在F5刷新时会清空，所以通过里面是否有vuex里的某个状态来判断是否要再次加载路由；一般用登录的token判断；

下面是加载动态路由的关键函数：

 /**
  * 加载动态菜单和路由
  */
 function addDynamicMenuAndRoutes(to, from) {
     // 处理IFrame嵌套页面
     handleIFrameUrl(to.path)
     api.menu.findMenuTree()
         .then(res => {
             // 添加动态路由
             console.log(res.data)
             let dynamicRoutes = addDynamicRoutes(res.data)
                 // 处理静态组件绑定路由
             handleStaticComponent(router, dynamicRoutes)
             router.addRoutes(router.options.routes)
             console.log(router.options.routes)
                 // 保存加载状态
             store.commit('menuRouteLoaded', true)
                 // 保存菜单树
             store.commit('setNavTree', res.data)
         }).then(res => {
             // api.user.findPermissions({ 'name': userName }).then(res => {
             //     // 保存用户权限标识集合
             //     store.commit('setPerms', res.data)
             // })
         })
         .catch(function(res) {})
 }

添加动态路由：

 /**
  * 添加动态(菜单)路由
  * @param {*} menuList 菜单列表
  * @param {*} routes 递归创建的动态(菜单)路由
  */
 function addDynamicRoutes(menuList = [], routes = []) {
     var temp = []
     for (var i = 0; i < menuList.length; i++) {
         if (menuList[i].children && menuList[i].children.length >= 1) {
             temp = temp.concat(menuList[i].children)
         } else if (menuList[i].url && /\S/.test(menuList[i].url)) {
             //menuList[i].url = menuList[i].url.replace(/^\//, '')
             menuList[i].url = menuList[i].url.substring(1);
             try {
                 // 根据菜单URL动态加载vue组件，这里要求vue组件须按照url路径存储
                 // 如url="sys/user"，则组件路径应是"@/views/sys/user.vue",否则组件加载不到
                 let array = menuList[i].url.split('/')
                 let url = ''
                 for (let i = 0; i < array.length; i++) {
                     url += array[i].substring(0, 1).toUpperCase() + array[i].substring(1) + '/'
                 }
                 url = url.substring(0, url.length - 1)
                 var route = {
                     path: menuList[i].url,
                     component: resolve => require([`@/views/${url}`], resolve),
                     name: menuList[i].name,
                     meta: {
                         icon: menuList[i].icon,
                         index: menuList[i].id
                     }
                 }
             } catch (e) {}
             // }
             routes.push(route)
         }
     }
     if (temp.length >= 1) {
         addDynamicRoutes(temp, routes)
     } else {
         // console.log('动态路由加载...')
         // console.log('动态路由加载完成.')
     }
     return routes
 }

模拟后台的路由数据：

  "data": [{
                 "id": 1,
                 "createBy": null,
                 "createTime": null,
                 "lastUpdateBy": null,
                 "lastUpdateTime": null,
                 "parentId": 0,
                 "name": "系统配置",
                 "url": null,
                 "perms": null,
                 "type": 0,
                 "icon": "el-icon-setting",
                 "orderNum": 0,
                 "delFlag": 0,
                 "parentName": null,
                 "level": 0,
                 "children": [{
                         "id": 2,
                         "createBy": null,
                         "createTime": null,
                         "lastUpdateBy": null,
                         "lastUpdateTime": null,
                         "parentId": 1,
                         "name": "角色配置",
                         "url": "/sys/user",
                         "perms": null,
                         "type": 1,
                         "icon": "el-icon-service",
                         "orderNum": 1,
                         "delFlag": 0,
                         "parentName": "系统配置",
                         "level": 1,
                         "children": []
                     }, {
                         "id": 3,
                         "createBy": null,
                         "createTime": null,
                         "lastUpdateBy": null,
                         "lastUpdateTime": null,
                         "parentId": 1,
                         "name": "业务配置",
                         "url": "/sys/dept",
                         "perms": null,
                         "type": 1,
                         "icon": "el-icon-news",
                         "orderNum": 2,
                         "delFlag": 0,
                         "parentName": "系统配置",
                         "level": 1,
                         "children": []
                     }, {
                         "id": 4,
                         "createBy": null,
                         "createTime": null,
                         "lastUpdateBy": null,
                         "lastUpdateTime": null,
                         "parentId": 1,
                         "name": "权限配置",
                         "url": "/sys/role",
                         "perms": null,
                         "type": 1,
                         "icon": "el-icon-view",
                         "orderNum": 4,
                         "delFlag": 0,
                         "parentName": "系统配置",
                         "level": 1,
                         "children": []
                     }, {
                         "id": 5,
                         "createBy": null,
                         "createTime": null,
                         "lastUpdateBy": null,
                         "lastUpdateTime": null,
                         "parentId": 1,
                         "name": "流程控制",
                         "url": "/sys/menu",
                         "perms": null,
                         "type": 1,
                         "icon": "el-icon-menu",
                         "orderNum": 5,
                         "delFlag": 0,
                         "parentName": "系统配置",
                         "level": 1,
                         "children": []
                     },
                     {
                         "id": 7,
                         "createBy": null,
                         "createTime": null,
                         "lastUpdateBy": null,
                         "lastUpdateTime": null,
                         "parentId": 1,
                         "name": "大数据",
                         "url": "/sys/dict",
                         "perms": null,
                         "type": 1,
                         "icon": "el-icon-edit-outline",
                         "orderNum": 7,
                         "delFlag": 0,
                         "parentName": "系统配置",
                         "level": 1,
                         "children": []
                     },
                     {
                         "id": 8,
                         "createBy": null,
                         "createTime": null,
                         "lastUpdateBy": null,
                         "lastUpdateTime": null,
                         "lastUpdateTime": "2018-09-23T11:32:28.000+0000",
                         "parentId": 1,
                         "name": "数据过滤",
                         "url": "/sys/log",
                         "perms": "sys:log:view",
                         "type": 1,
                         "icon": "el-icon-info",
                         "orderNum": 8,
                         "delFlag": 0,
                         "parentName": "系统配置",
                         "level": 1,
                         "children": []
                     }, {
                         "id": 9,
                         "createBy": null,
                         "createTime": null,
                         "lastUpdateBy": "admin",
                         "lastUpdateTime": "2018-09-23T11:32:28.000+0000",
                         "parentId": 1,
                         "name": "系统维护",
                         "url": "/sys/dispose",
                         "perms": "sys:dispose:view",
                         "type": 1,
                         "icon": "el-icon-info",
                         "orderNum": 9,
                         "delFlag": 0,
                         "parentName": "系统配置",
                         "level": 1,
                         "children": []
                     }
                 ]
             }
         ]

本文主要参考 朝雨忆轻尘，感谢大佬的详细介绍。

另附出处： https://www.cnblogs.com/xifengxiaoma/