二、动态生成路由

1. 把路由分类
   路由需要分成两类，静态路由和动态路由。静态路由是任何菜单权限下都能查看的界面路由；动态路由是根据菜单权限动态生成的路由集合。这里的动态路由与VueRouter的动态路由概念没有任何关系。
   比如：
   /** router.js */

/**

• 静态路由
  /
  export const constantRouterMap = [
  {
  path: ‘/’,
  redirect: ‘/dashboard’
  },
  {
  path: ‘/login’,
  name: ‘Login’,
  component: () => import(’@/views/Login’)
  },
  {
  path: ‘/forgetPassword’,
  name: ‘ForgetPassword’,
  component: () => import(’@/views/ForgetPassword’)
  },
  {
  path: ‘/register’,
  name: ‘Register’,
  component: () => import(’@/views/Register’)
  },
  {
  path: '’,
  name: ‘404’,
  component: () => import(’@/views/404’)
  }
  ]

/**

• 需要动态添加的路由
  */
  export const asyncRouterMap = [
  {
  path: ‘/educate’,
  name: ‘Educate’,
  component: Layout,
  meta: {
  title: ‘教务管理’
  },
  children: [
  {
  path: ‘student’,
  name: ‘Student’,
  component: () => import(’_v/educate/student’),
  meta: {
  keepAlive: true,
  title: ‘学员中心-桃李云帮’
  }
  },
  {
  path: ‘studentEnroll’,
  name: ‘StudentEnroll’,
  component: () => import(’_v/educational/studentEnroll’),
  meta: {
  isLeaf: true,
  title: ‘学员报名-桃李云帮’
  }
  },
  {
  path: ‘class’,
  name: ‘Class’,
  component: () => import(’_v/educate/class’),
  meta: {
  // keepAlive: true,
  title: ‘班级管理-桃李云帮’
  }
  },
  {
  path: ‘timetable’,
  name: ‘Timetable’,
  component: () => import(’_v/educate/table’),
  meta: {
  // 不需要缓存
  title: ‘课表管理-桃李云帮’
  }
  },
  {
  path: ‘course’,
  name: ‘Course’,
  component: () => import(’_v/educate/course’),
  meta: {
  keepAlive: true,
  title: ‘课程管理-桃李云帮’
  }
  }
  ]
  },
  executiveRoute,
  …
  ]

export default new Router({
mode: ‘hash’,
base: process.env.BASE_URL,
routes: constantRouterMap // 这里只返回静态路由
})

2. 动态匹配路由
   使用VueRouter的router.addRoutes(routes: Array)方法，动态添加路由。
   注意：这里是通过URL匹配，你也可以根据其他方式匹配。 isLeaf表示不在菜单中的路由，应该根据权限来判断是否动态添加路由

/** store.js */
addUserMenus({ commit }, menus) {
commit(‘setMenuList’, menus)
// 扁平化菜单数据
const menuList = treeToList(menus.concat([]))
const addRoutes = []
let tempPath = ‘’
let tempList = []
// 这里只做了两层的路由处理
asyncRouterMap.forEach(item1 => {
tempPath = item1.path || ‘’
tempList = []
if (item1.children) {
item1.children.forEach(item2 => {
// TODO isLeaf是写死的，应该按照权限判断
if ((item2.meta && item2.meta.isLeaf) || menuList.find(o => o.url && path.join(tempPath, item2.path).toLowerCase() === o.url.toLowerCase())) {
tempList.push(item2)
}
})
}
if (tempList.length > 0) {
addRoutes.push(Object.assign({}, item1, {
children: tempList
}))
}
})
// 添加授权路由页面
Router.addRoutes(addRoutes)
}

treeToList方法

/**

• 树 转 列表
• 广度优先，先进先出
• @param {Array} tree 树状数据
• @param {String} childKey children的key
  */
  export function treeToList(tree, childKey = ‘children’) {
  let stack = tree.concat([])
  let data = []
  while (stack.length !== 0) {
  // 从stack中拿出来分析
  let shift = stack.shift() // stack.pop() 先进后出
  data.push(shift)
  let children = shift[childKey]
  if (children) {
  for (let i = 0; i < children.length; i++) {
  // 把数据放入stack中
  stack.push(children[i])
  }
  }
  }
  return data
  }