leave-school-vue/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading

Vue.use(Router)

/* Layout */
import Layout from '../views/layout/Layout'
import { getMenuList } from '../api/menulist-api'

/**
* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
* alwaysShow: true               if set true, will always show the root menu, whatever its child routes length
*                                if not set alwaysShow, only more than one route under the children
*                                it will becomes nested mode, otherwise not show the root menu
* redirect: noredirect           if `redirect:noredirect` will no redirct in the breadcrumb
* name:'router-name'             the name is used by <keep-alive> (must set!!!)
* meta : {
    title: 'title'               the name show in submenu and breadcrumb (recommend set)
    icon: 'svg-name'             the icon show in the sidebar,
  }
**/
// 全局路由
const globalRouter = [
  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
  { path: '/404', component: () => import('@/views/404'), hidden: true }
]
// 主页路由
const mainRouter = {
  path: '/',
  component: Layout,
  redirect: '/dashboard',
  hidden: true,
  children: [{
    path: 'dashboard',
    component: () => import('@/views/dashboard/index'),
    name: 'Dashboard',
    meta: { title: 'Dashboard', icon: 'dashboard', noCache: true }
  }]
}
// 菜单路由
const menuRouter = []

const constantRouterMap = globalRouter.concat(mainRouter).concat(menuRouter)

const router = new Router({
  // mode: 'history', //后端支持可开
  scrollBehavior: () => ({ y: 0 }),
  hasLoadedDynamicRoutes: false, // 动态路由已加载
  routes: constantRouterMap
})

router.beforeEach((to, from, next) => {
  if (router.options.hasLoadedDynamicRoutes) {
    next()
  } else {
    getMenuList().then(response => {
      const menuList = initDynamicRouters(response.items)
      router.options.routes.push(...menuList)
      router.addRoutes(menuList)
      router.addRoutes([{ path: '*', redirect: '/404', hidden: true }])
      router.options.hasLoadedDynamicRoutes = true
      next({ ...to, replace: true })
    })
  }
})
function getMenuResource(resource) {
  let menuresource = resource
  if (menuresource && menuresource.startsWith('/views/')) {
    menuresource = menuresource.substring(6)
  }
  return menuresource
}
function getChildren(menus) {
  const children = []
  for (const menu of menus) {
    const menuresource = getMenuResource(menu.resource)
    const route = {
      path: menu.path,
      name: menu.code,
      component: () => import('@/views' + menuresource),
      meta: menu.meta,
      hidden: menu.hidden,
      children: menu.children ? getChildren(menu.children) : null
    }
    children.push(route)
  }
  return children.length > 0 ? children : null
}

function initDynamicRouters(menus) {
  const menuList = []
  if (menus && menus.length > 0) {
    for (const menu of menus) {
      const route = {
        path: menu.path,
        component: Layout,
        // alwaysShow: true,
        redirect: menu.path + '/' + ((menu.children && menu.children.length > 0) ? menu.children[0].path : null),
        name: menu.code,
        meta: menu.meta,
        hidden: menu.hidden,
        children: menu.children ? getChildren(menu.children) : null
      }
      menuList.push(route)
    }
  }
  return menuList
}

export default router