vue-element-admin
前置要点 每页都要有name
1. 修改 src\store\modules\permission.js
1.添加两个方法
/**
* 生成扁平化机构路由(仅两级结构)
* @param {允许访问的路由Tree} accessRoutes
* 路由基本机构:
* {
* name: String,
* path: String,
* component: Component,
* redirect: String,
* children: [
* ]
* }
*/
function generateFlatRoutes(accessRoutes) {
const flatRoutes = []
for (const item of accessRoutes) {
let childrenFflatRoutes = []
if (item.children && item.children.length > 0) {
childrenFflatRoutes = castToFlatRoute(item.children, '')
}
// 一级路由是布局路由,需要处理的只是其子路由数据
flatRoutes.push({
name: item.name,
path: item.path,
component: item.component,
redirect: item.redirect,
children: childrenFflatRoutes
})
}
return flatRoutes
}
/**
* 将子路由转换为扁平化路由数组（仅一级）
* @param {待转换的子路由数组} routes
* @param {父级路由路径} parentPath
*/
function castToFlatRoute(routes, parentPath, flatRoutes = []) {
for (const item of routes) {
if (item.children && item.children.length > 0) {
if (item.redirect && item.redirect !== 'noRedirect') {
flatRoutes.push({
name: item.name,
path: (parentPath + '/' + item.path).substring(1),
redirect: item.redirect,
meta: item.meta
})
}
castToFlatRoute(item.children, parentPath + '/' + item.path, flatRoutes)
} else {
flatRoutes.push({
name: item.name,
path: (parentPath + '/' + item.path).substring(1),
component: item.component,
meta: item.meta
})
}
}
return flatRoutes
}
2.修改actions
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
// let accessedRoutes
// if (roles.includes('admin')) {
// accessedRoutes = asyncRoutes || []
// } else {
// accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
// }
const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
// 重点修改 下边
const flatRoutes = generateFlatRoutes(accessedRoutes)
commit('SET_ROUTES', accessedRoutes)
resolve(flatRoutes)
})
}
2.src\permission.js
// note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
const { roles } = await store.dispatch('user/getInfo')
// generate accessible routes map based on roles
// 下边修改接参变量命名 与 返回变量名一致 不至于理解混乱
const flatRoutes = await store.dispatch('permission/generateRoutes', roles)
// dynamically add accessible routes
router.addRoutes(flatRoutes)
el-admin 2.5前的版本
1.src\router\index.js
1. 添加两个方法 (同上边vue-element-admin所添加的方法是一样的，只是添加文件不一样)
/**
* 生成扁平化机构路由(仅两级结构)
* @param {允许访问的路由Tree} accessRoutes
* 路由基本机构:
* {
* name: String,
* path: String,
* component: Component,
* redirect: String,
* children: [
* ]
* }
*/
function generateFlatRoutes(accessRoutes) {
const flatRoutes = []
for (const item of accessRoutes) {
let childrenFflatRoutes = []
if (item.children && item.children.length > 0) {
childrenFflatRoutes = castToFlatRoute(item.children, '')
}
// 一级路由是布局路由,需要处理的只是其子路由数据
flatRoutes.push({
name: item.name,
path: item.path,
component: item.component,
redirect: item.redirect,
children: childrenFflatRoutes
})
}
return flatRoutes
}
/**
* 将子路由转换为扁平化路由数组（仅一级）
* @param {待转换的子路由数组} routes
* @param {父级路由路径} parentPath
*/
function castToFlatRoute(routes, parentPath, flatRoutes = []) {
for (const item of routes) {
if (item.children && item.children.length > 0) {
if (item.redirect && item.redirect !== 'noRedirect') {
flatRoutes.push({
name: item.name,
path: (parentPath + '/' + item.path).substring(1),
redirect: item.redirect,
meta: item.meta
})
}
castToFlatRoute(item.children, parentPath + '/' + item.path, flatRoutes)
} else {
flatRoutes.push({
name: item.name,
path: (parentPath + '/' + item.path).substring(1),
component: item.component,
meta: item.meta
})
}
}
return flatRoutes
}
2.修改loadMenus 方法
export const loadMenus = (next, to) => {
buildMenus().then(res => {
const asyncRouter = filterAsyncRouter(res)
const flatRoutes = generateFlatRoutes(asyncRouter)
asyncRouter.push({ path: '*', redirect: '/404', hidden: true })
store.dispatch('GenerateRoutes', asyncRouter).then(() => { // 存储路由
router.addRoutes(flatRoutes) // 动态添加可访问路由表
next({ ...to, replace: true })
})
})
}
以上方法 亲测可用
