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