在这里我们将会实现一个vue动态路由的案列，当用户登陆成功后，根据用户的角色，拿到他对应的菜单信息，并将它动态的载入到我们的路由中。
我们的通用的后台管理系统中，我们会根据权限的粗细不同，会对每个角色每个权限每个资源进行控制。同样的我们也需要实现一个这样的功能。 这篇文章我将主要讲vue端的实现，关于后台接口我就不会涉及，当我接触的时候我们的后台接口是springcloud实现。
一、思路
在vue-router对象中首先初始化公共路由，比如（404，login）等，然后在用户登陆成功，根据用户的角色信息，获取对应权限菜单信息menuList，并将后台返回的menuList转换成我们需要的router数据结构，然后通过vue-router2.2新添的router.addRouter(routes)方法，同时我们可以将转后的路由信息保存于vuex，这样我们可以在我们的SideBar组件中获取我们的全部路由信息，并且渲染我们的左侧菜单栏，让动态路由实现。
二、实现
1、公共路由定义
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) /* Layout */ import Layout from '../views/layout/Layout' export const constantRouterMap = [ { path: '/login', component: () => import('@/views/login/index'), hidden: true }, { path: '/404', component: () => import('@/views/404'), hidden: true }, { path: 'https://www.jb51.net/', component: Layout, redirect: '/dashboard', name: 'Dashboard', hidden: true, children: [{ path: 'dashboard', component: () => import('@/views/dashboard/index') }] }, ] export default new Router({ scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap })
2、获取菜单信息
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: 'https://www.jb51.net/' }) 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: 'https://www.jb51.net/' }) }) }) } 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 })
在这里 我们通过在router的beforeEach钩子函数 判断用户是否已经获得角色信息，如果没有，则请求后台获取对应的角色信息，然后通过角色信息再次请求获取对应的菜单列表，获取到菜单列表，然后去格式化菜单列表，使其转换成router数组的结构。
3、动态加载路由
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.commit('ADD_ROUTERS',menus) } export const formatRoutes = (aMenu) => { const aRouter = [] aMenu.forEach(oMenu => { const { path, component, name, icon, childrens } = oMenu if (!validatenull(component)) { let filePath; const oRouter = { path: path, component(resolve) { let componentPath = '' if (component === 'Layout') { require(['../views/layout/Layout'], resolve) return } else { componentPath = component } require([`../${componentPath}.vue`], resolve) }, name: name, icon: icon, children: validatenull(childrens) ? [] : formatRoutes(childrens) } aRouter.push(oRouter) } }) return aRouter }
在这里我们把menList转换成routerList因为我们后台返回的数据不是规范的router结构，所以这里需要我们处理一下，如果你们后台返回规范的就不需要处理，然后通过router.addRoutes把后台返回的加入到我们的路由中，并且将其保存在我们的vuex中，需要主要的 如果404组件一定要放在动态路由在后载入。
4、渲染菜单
其实这里已经不属于我们的所讲的重点，在这里只需要取出上一步存在vuex中的路由信息，并且将其渲染成我们的左侧菜单栏就可以。在这里我们使用了element-ui。