用户登录后返回权限菜单，前端根据权限菜单动态添加路由，然后再动态生成菜单栏。
思路如下：
一、定义初始化默认路由。
二、动态配置路由，这里是把所有组件中相应的路由配置成一个个的对象，根据后台返回的菜单tree一个个去匹配。
三、通过匹配，把匹配好的路由数据addRoutes到路由中。
四、为了防止刷新页面后路由数据被清空，这里用判断是否登录的方式，再次加载动态路由。
具体代码如下：
router.js
import Vue from 'vue' import {router} from './index' import login from '@/views/login/login' import layout from '@/views/layout/layout' import home from '@/views/home/home.vue' import depDsStorageList from '@/views/home/homePage1/depDsStorageList.vue' // 数据管理 import dataSourceAdmin from '@/views/dataManage/dataSourceAdmin/dataSourceAdmin' import dataPoolAdmin from '@/views/dataManage/dataPoolAdmin/dataPoolAdmin' import buildSqlTable from '@/views/dataManage/buildSqlTable/buildSqlTable' import complianceDetectionFunction from '@/views/dataManage/complianceDetectionFunction/complianceDetectionFunction' import tablePreview from '@/views/dataManage/dataSourceAdmin/tablePreview/tablePreview.vue' import dataAssetsManage from '@/views/dataManage/dataAssetsManage/dataAssetsManage.vue' //标准管理 import codeItemManage from '@/views/standardManage/codeItemManage/codeItemManage' import metadataManage from '@/views/standardManage/metadataManage/metadataManage' import standardFileManage from '@/views/standardManage/standardFileManage/standardFileManage' import determinerManage from '@/views/standardManage/determinerManage/determinerManage' //数据服务 import dataServiceAdmin from '@/views/dataService/dataServiceAdmin/dataServiceAdmin.vue' import customizedServiceAdmin from '@/views/dataService/customizedServiceAdmin/customizedServiceAdmin.vue' //系统管理 import labelManage from '@/views/systemManage/labelManage/labelManage.vue' import roleMenu from '@/views/systemManage/role-menu/role-menu.vue' import userAdmin from '@/views/systemManage/user-admin/user-admin.vue' import roleAdmin from '@/views/systemManage/role-admin/role-admin.vue' //权限 import haveNoAuthority from '@/views/systemManage/NoAuthority/haveNoAuthority' import haveNotFound from '@/views/systemManage/NoAuthority/haveNotFound' //初始化默认路由 export let initMenu = [ {path: '', redirect: '/login'}, { path: '/login', name: 'login', component: login }, { path: '/haveNoAuthority', name: 'haveNoAuthority', component: haveNoAuthority }, { path: '/haveNotFound', name: 'haveNotFound', component: haveNotFound }, { path: '', redirect: '/depDsStorageList', component: layout, children: [ { path: 'depDsStorageList', name: '首页内容列表', component: depDsStorageList, }, ], }, { path: '', redirect: 'addDataService', component: layout, children: [ { path: 'addDataService', name: '新增数据服务', component: () => import('@/views/dataService/dataServiceAdmin/addDataService.vue'), }, ], }, { path: '', redirect: '/dataPoolAdmin', component: layout, children: [ { path: 'dataPoolAdmin', name: '数据池管理', component: dataPoolAdmin }, ], }, { path: '', redirect: '/tablePreview', component: layout, children: [ { path: 'tablePreview', name: '表关系预览', component: tablePreview }, ], }, ] //动态配置路由 export let menu = { "首页": { path: '', redirect: '/home', component: layout, children: [ { path: 'home', name: '首页', component: home, } ], }, "标准数据服务": { path: '', redirect: '/dataServiceAdmin', component: layout, children: [ { path: 'dataServiceAdmin', name: '标准数据服务', component: dataServiceAdmin, } ], }, "定制数据服务": { path: '', redirect: '/customizedServiceAdmin', component: layout, children: [ { path: 'customizedServiceAdmin', name: '定制数据服务', component: customizedServiceAdmin, } ], }, "数据源管理": { path: '', redirect: '/dataSourceAdmin', component: layout, children: [ { path: 'dataSourceAdmin', name: '数据源管理', component: dataSourceAdmin, } ], }, "数据资产管理": { path: '', redirect: '/dataAssetsManage', component: layout, children: [ { path: 'dataAssetsManage', name: '数据资产管理', component: dataAssetsManage, } ], }, "标签管理": { path: '', redirect: '/labelManage', component: layout, children: [ { path: 'labelManage', name: '标签管理', component: labelManage, }, ], }, "标准规范管理": { path: '', redirect: '/standardFileManage', component: layout, children: [ { path: 'standardFileManage', name: '标准规范管理', component: standardFileManage }, ], }, "数据元管理": { path: '', redirect: '/metadataManage', component: layout, children: [ { path: 'metadataManage', name: '数据元管理', component: metadataManage }, ], }, "限定词管理": { path: '', redirect: '/determinerManage', component: layout, children: [ { path: 'determinerManage', name: '限定词管理', component: determinerManage }, ], }, "代码项管理": { path: '', redirect: '/codeItemManage', component: layout, children: [ { path: 'codeItemManage', name: '代码项管理', component: codeItemManage }, ], }, "依标建库": { path: '', redirect: '/buildSqlTable', component: layout, children: [ { path: 'buildSqlTable', name: '依标建库', component: buildSqlTable }, ], }, "合规检测": { path: '', redirect: '/complianceDetectionFunction', component: layout, children: [ { path: 'complianceDetectionFunction', name: '合规检测', component: complianceDetectionFunction }, ], }, "用户管理": { path: '', redirect: '/userAdmin', component: layout, children: [ { path: 'userAdmin', name: '用户管理', component: userAdmin }, ], }, "权限管理": { path: '', redirect: '/roleAdmin', component: layout, children: [ { path: 'roleAdmin', name: '权限管理', component: roleAdmin }, ], }, "角色资源管理": { path: '', redirect: '/roleMenu', component: layout, children: [ { path: 'roleMenu', name: '角色资源管理', component: roleMenu } ], } } export let menuList = [] export const setMenuTree = function (menuTree) { let temp = new Vue({router}) hanleFor(menuTree) temp.$router.addRoutes(menuList) temp.$router.addRoutes([{path: '*', redirect: 'https://www.jb51.net/' + menuList[0].redirect}]) } const hanleFor = function (list){ for (var i=0; i<list.length; i++) { if (list[i].children) { hanleFor(list[i].children) }else{ menuList.push(menu[list[i].name]) } } } export const routers = { router: initMenu }
index.js