vue2后台动态路由

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": []
}
]
}
]