userlist: () => import('@/views/other/UserList')，
这样生成的路由就是我们所要的了。
import { axios } from '@/utils/request'
import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/layouts'
// 前端路由表
const constantRouterComponents = {
// 基础页面 layout 必须引入
BasicLayout: BasicLayout,
BlankLayout: BlankLayout,
RouteView: RouteView,
PageView: PageView,
// 需要动态引入的页面组件
analysis: () => import('@/views/dashboard/Analysis'),
workplace: () => import('@/views/dashboard/Workplace'),
monitor: () => import('@/views/dashboard/Monitor'),
userlist: () => import('@/views/other/UserList')
// ...more
}
// 前端未找到页面路由（固定不用改）
const notFoundRouter = {
path: '*', redirect: '/404', hidden: true
}
/**
* 获取后端路由信息的 axios API
* @returns {Promise}
*/
export const getRouterByUser = (parameter) => {
return axios({
url: '/menu/' + parameter.username,
method: 'get'
})
}
/**
* 获取路由菜单信息
*
* 1. 调用 getRouterByUser() 访问后端接口获得路由结构数组
* 2. 调用
* @returns {Promise<any>}
*/
export const generatorDynamicRouter = (data) => {
return new Promise((resolve, reject) => {
// ajax
getRouterByUser(data).then(res => {
// const result = res.result
const routers = generator(res)
routers.push(notFoundRouter)
resolve(routers)
}).catch(err => {
reject(err)
})
})
}
/**
* 格式化 后端 结构信息并递归生成层级路由表
*
* @param routerMap
* @param parent
* @returns {*}
*/
export const generator = (routerMap, parent) => {
return routerMap.map(item => {
const currentRouter = {
// 路由地址 动态拼接生成如 /dashboard/workplace
path: `${item && item.path || ''}`,
// 路由名称，建议唯一
name: item.name || item.key || '',
// 该路由对应页面的 组件
component: constantRouterComponents[item.component || item.key],
// meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
meta: { title: item.name, icon: item.icon || undefined, permission: item.key && [ item.key ] || null }
}
// 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
currentRouter.path = currentRouter.path.replace('//', '/')
// 重定向
item.redirect && (currentRouter.redirect = item.redirect)
// 是否有子菜单，并递归处理
if (item.children && item.children.length > 0) {
// Recursion
currentRouter.children = generator(item.children, currentRouter)
