路由

路由分为两类，静态路由和动态路由。静态路由是任何菜单权限下都能查看的界面路由；动态路由是根据菜单权限动态生成的路由集合。这里的动态路由与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 // 这里只返回静态路由
})

动态匹配路由

使用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
}