vue后台管理之动态加载路由的方法

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

Vue.use(Router)
/ Layout /
import Layout from '../views/layout/Layout'

export const constantRouterMap = [
 { path: '/login', ponent: () => import('@/views/login/index'), hidden: true },
 { path: '/404', ponent: () => import('@/views/404'), hidden: true },

 {
  path: '/',
  ponent: Layout,
  redirect: '/dashboard',
  name: 'Dashboard',
  hidden: true,
  children: [{
   path: 'dashboard',
   ponent: () => import('@/views/dashboard/index')
  }]
 },
]
export default new Router({
 scrollBehavior: () => ({ y: 0 }),
 routes: constantRouterMap
})

router.beforeEach((to, from, next) => {
 NProgress.start() // start progress bar
 if (getToken()) { // determine if there has token
  / has token/
  if (to.path === '/login') {
   next({ path: '/' })
   NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
  } else {
   if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
    store.dispatch('GetInfo').then(res => { // 拉取user_info
     const roles = res.roles
     store.dispatch("GetMenu").then(data => {
      initMenu(router, data);
     });
     next()
    }).catch((err) => {
     store.dispatch('FedLogOut').then(() => {
      Message.error(err || 'Verification failed, please login again')
      next({ path: '/' })
     })
    })
   } else {
    next()
   }
  }
 } else {
  / has no token/
  if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
   next()
  } else {
   next('/login') // 否则全部重定向到登录页
   NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
  }
 }
})

router.afterEach(() => {
 NProgress.done() // finish progress bar
})

import store from '../store'

export const initMenu = (router, menu) => {
 if (menu.length === 0) {
  return
 }
 let menus = formatRoutes(menu);
 // 添加
 let unfound = { path: '', redirect: '/404', hidden: true }
 menus.push(unfound)
 router.addRoutes(menus)
 store.mit('ADD_ROUTERS',menus)
}

export const formatRoutes = (aMenu) => {
 const aRouter = []
 aMenu.forEach(oMenu => {
  const {
   path,
   ponent,
   name,
   icon,
   childrens
  } = oMenu
  if (!validatenull(ponent)) {
   let filePath;
   const oRouter = {
    path: path,
    ponent(resolve) {
     let ponentPath = ''
     if (ponent === 'Layout') {
      require(['../views/layout/Layout'], resolve)
      return
     } else {
      ponentPath = ponent
     }
     require([`../${ponentPath}.vue`], resolve)
    },
    name: name,
    icon: icon,
    children: validatenull(childrens) ? [] : formatRoutes(childrens)
   }
   aRouter.push(oRouter)
  }

 })
 return aRouter
}

<template>
 <el-scrollbar wrapClass="scrollbar-wrapper">
  <el-menu
   mode="vertical"
   :show-timeout="200"
   :default-active="$route.path"
   :collapse="isCollapse"
   background-color="#304156"
   text-color="#bfcbd9"
   active-text-color="#409EFF"
  >
   <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
  </el-menu>
 </el-scrollbar>
</template>

<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
import { validatenull } from "@/utils/validate";
import { initMenu } from "@/utils/util";

export default {
 ponents: { SidebarItem },
 created() {
 },
 puted: {
  ...mapGetters([
   'permission_routers',
   'sidebar',
   'addRouters'
  ]),
  isCollapse() {
   return !this.sidebar.opened
  }
 }
}
</script>

export const initMenu = (router, menu) => {
 if (menu.length === 0) {
  return
 }
 let menus = formatRoutes(menu);
 // 添加
 let unfound = { path: '', redirect: '/404', hidden: true }
 menus.push(unfound)
 router.addRoutes(menus)
 store.mit('ADD_ROUTERS',menus)
}