前端的路由从后台获取，包括权限；
大体步骤包括：路由拦截（钩子函数）---->后台获取路由数据 ----> 保存到本地或vuex中.
在router-->index.js中：
1 router.beforeEach((to, from, next) => { //拦截处一定要else{} 2 // 加载动态菜单和路由 3 if (to.path === '/') { 4 addDynamicMenuAndRoutes(to, from) 5 console.log(router.options.routes); 6 next() 7 } else { 8 if (store.state.menu.navTree) { 9 addDynamicMenuAndRoutes(to, from)10 }11 next()12 }13 }) 一个Tip，钩子函数一定要记得else{},就这个小问题找了半天，各种排除。。。
我这里没有登录验证，所以通过path来判断是否加载动态路由；
下面的判断是由于vuex在F5刷新时会清空，所以通过里面是否有vuex里的某个状态来判断是否要再次加载路由；一般用登录的token判断；
下面是加载动态路由的关键函数：
1 /** 2 * 加载动态菜单和路由 3 */ 4 function addDynamicMenuAndRoutes(to, from) { 5 // 处理IFrame嵌套页面 6 handleIFrameUrl(to.path)11 api.menu.findMenuTree()12 .then(res => {13 // 添加动态路由14 console.log(res.data)15 let dynamicRoutes = addDynamicRoutes(res.data)16 // 处理静态组件绑定路由17 handleStaticComponent(router, dynamicRoutes)18 router.addRoutes(router.options.routes)19 console.log(router.options.routes)20 // 保存加载状态21 store.commit('menuRouteLoaded', true)22 // 保存菜单树23 store.commit('setNavTree', res.data)24 }).then(res => {25 // api.user.findPermissions({ 'name': userName }).then(res => { 26 // // 保存用户权限标识集合27 // store.commit('setPerms', res.data)28 // })29 })30 .catch(function(res) {})31 } 添加动态路由：
1 /** 2 * 添加动态(菜单)路由 3 * @param {*} menuList 菜单列表 4 * @param {*} routes 递归创建的动态(菜单)路由 5 */ 6 function addDynamicRoutes(menuList = [], routes = []) { 7 var temp = []12 for (var i = 0; i < menuList.length; i++) {13 if (menuList[i].children && menuList[i].children.length >= 1) {14 temp = temp.concat(menuList[i].children)15 } else if (menuList[i].url && /\S/.test(menuList[i].url)) {16 //menuList[i].url = menuList[i].url.replace(/^\//, '')17 menuList[i].url = menuList[i].url.substring(1);18 try {19 // 根据菜单URL动态加载vue组件，这里要求vue组件须按照url路径存储20 // 如url="sys/user"，则组件路径应是"@/views/sys/user.vue",否则组件加载不到21 let array = menuList[i].url.split('/')22 let url = ''23 for (let i = 0; i < array.length; i++) {24 url += array[i].substring(0, 1).toUpperCase() + array[i].substring(1) + '/'25 }26 url = url.substring(0, url.length - 1)27 var route = {28 path: menuList[i].url,29 component: resolve => require([`@/views/${url}`], resolve),30 name: menuList[i].name,31 meta: {32 icon: menuList[i].icon,33 index: menuList[i].id34 }35 }36 } catch (e) {}37 // }38 routes.push(route)39 }40 }41 if (temp.length >= 1) {42 addDynamicRoutes(temp, routes)43 } else {44 // console.log('动态路由加载...')45 // console.log('动态路由加载完成.')46 }47 return routes48 } 模拟后台的路由数据：
1 "data": [{ 2 "id": 1, 3 "createBy": null, 4 "createTime": null, 5 "lastUpdateBy": null, 6 "lastUpdateTime": null, 7 "parentId": 0, 8 "name": "系统配置", 9 "url": null, 10 "perms": null, 11 "type": 0, 12 "icon": "el-icon-setting", 13 "orderNum": 0, 14 "delFlag": 0, 15 "parentName": null, 16 "level": 0, 17 "children": [{ 18 "id": 2, 19 "createBy": null, 20 "createTime": null, 21 "lastUpdateBy": null, 22 "lastUpdateTime": null, 23 "parentId": 1, 24 "name": "角色配置", 25 "url": "/sys/user", 26 "perms": null, 27 "type": 1, 28 "icon": "el-icon-service", 29 "orderNum": 1, 30 "delFlag": 0, 31 "parentName": "系统配置", 32 "level": 1, 33 "children": [] 34 }, { 35 "id": 3, 36 "createBy": null, 37 "createTime": null, 38 "lastUpdateBy": null, 39 "lastUpdateTime": null, 40 "parentId": 1, 41 "name": "业务配置", 42 "url": "/sys/dept", 43 "perms": null, 44 "type": 1, 45 "icon": "el-icon-news", 46 "orderNum": 2, 47 "delFlag": 0, 48 "parentName": "系统配置", 49 "level": 1, 50 "children": [] 51 }, { 52 "id": 4, 53 "createBy": null, 54 "createTime": null, 55 "lastUpdateBy": null, 56 "lastUpdateTime": null, 57 "parentId": 1, 58 "name": "权限配置", 59 "url": "/sys/role", 60 "perms": null, 61 "type": 1, 62 "icon": "el-icon-view", 63 "orderNum": 4, 64 "delFlag": 0, 65 "parentName": "系统配置", 66 "level": 1, 67 "children": [] 68 }, { 69 "id": 5, 70 "createBy": null, 71 "createTime": null, 72 "lastUpdateBy": null, 73 "lastUpdateTime": null, 74 "parentId": 1, 75 "name": "流程控制", 76 "url": "/sys/menu", 77 "perms": null, 78 "type": 1, 79 "icon": "el-icon-menu", 80 "orderNum": 5, 81 "delFlag": 0, 82 "parentName": "系统配置", 83 "level": 1, 84 "children": [] 85 }, 86 { 87 "id": 7, 88 "createBy": null, 89 "createTime": null, 90 "lastUpdateBy": null, 91 "lastUpdateTime": null, 92 "parentId": 1, 93 "name": "大数据", 94 "url": "/sys/dict", 95 "perms": null, 96 "type": 1, 97 "icon": "el-icon-edit-outline", 98 "orderNum": 7, 99 "delFlag": 0,100 "parentName": "系统配置",101 "level": 1,102 "children": []103 },104 {105 "id": 8,106 "createBy": null,107 "createTime": null,108 "lastUpdateBy": null,109 "lastUpdateTime": null,110 "lastUpdateTime": "2018-09-23T11:32:28.000+0000",111 "parentId": 1,112 "name": "数据过滤",113 "url": "/sys/log",114 "perms": "sys:log:view",115 "type": 1,116 "icon": "el-icon-info",117 "orderNum": 8,118 "delFlag": 0,119 "parentName": "系统配置",120 "level": 1,121 "children": []122 }, {123 "id": 9,124 "createBy": null,125 "createTime": null,126 "lastUpdateBy": "admin",127 "lastUpdateTime": "2018-09-23T11:32:28.000+0000",128 "parentId": 1,129 "name": "系统维护",130 "url": "/sys/dispose",131 "perms": "sys:dispose:view",132 "type": 1,133 "icon": "el-icon-info",134 "orderNum": 9,135 "delFlag": 0,136 "parentName": "系统配置",137 "level": 1,138 "children": []139 }140 ]141 }142 ] 本文主要参考 ，感谢大佬的详细介绍。
另附出处：