动态路由：vue的路由，可通过new Router传入路由数组定义实现，也可以通过router.addRoutes实现。通过router.addRoutes动态传入路由定义的方式，称之为动态路由。路由数据可以全部保存在后台数据库中，也可以将路由配置在前端，后端返回给前端路由权限信息，然后匹配过滤，进行加载。本文就这两种方式分别进行介绍，并且给出实现参考。
目标：
基于iview-admin最新代码，实现两种不同的路由动态加载方式：
路由(导航菜单)数据全部存储在后台
路由数据配置在前端，后台只存储权限信息
注意：本文通过Mock模拟后端接口
方式1：路由(导航菜单)数据全部存储在后台
定义路由数据结构体,在文件中：src/mock/data.js
export const routersData = [{ path: '/pet',//访问路径 name: 'Pet',//路由的名字，这个与i18n有关，需要唯一 meta: { title: '宠物',//标题 hideInMenu: false,//是否在左侧导航菜单隐藏 icon: 'logo-freebsd-devil'//图标 }, component: 'components/main',//组件文件路径，不需要Import children: [{//嵌套路由 path: 'cat', name: 'Cat', meta: { title: '猫咪', hideInMenu: false, icon: 'ios-cloudy-night' }, component: 'view/pet/cat/Cat.vue' }, { path: 'dog', name: 'Dog', meta: { hideInMenu: false, title: '狗娃', icon: 'ios-color-filter' }, component: 'view/pet/dog/Dog.vue' }, { path: 'pig', name: 'Pig', meta: { hideInMenu: false, title: '猪啊', icon: 'ios-contact' }, component: 'view/pet/pig/Pig.vue', children: [ { path: 'female', name: 'Female', meta: { hideInMenu: false, title: '母猪', icon: 'ios-contact' }, component: 'view/pet/pig/Pig.vue', }, { path: 'male', name: 'Male', meta: { hideInMenu: false, title: '公猪', icon: 'ios-contact' }, component: 'view/pet/pig/Pig.vue', } ] }]}]
暴露ajax调用接口:src/mock/index.js，中增加：
Mock.mock(/\/sys\/routers/, routersData)
实现一个ajax调用：src/api/routers.js中增加：
export const getRouterReq = (access) => { return axios.request({ url: '/sys/routers', params: { access }, method: 'get' })}
1、在store中定义动态路由相关逻辑，修改：src/store/module/app.js
引入ajax请求：
import {getRouterReq} from '@/api/routers'
定义两个state,如下
state: { ..... routers: [],//拿到的路由数据 hasGetRouter: false//是否已经拿过路由数据 },
同步增加mutations：
mutations：{ ...... //设置路由数据 setRouters(state, routers) { state.routers = routers }, //设置是否已经拿过路由 setHasGetRouter(state, status) { state.hasGetRouter = status }......}
增加一个action：
action:{ ........ getRouters({commit}) { return new Promise((resolve, reject) => { try { getRouterReq().then(res => { let routers = backendMenusToRouters(res.data) commit('setRouters', routers) commit('setHasGetRouter', true) resolve(routers) }).catch(err => { reject(err) }) } catch (error) { reject(error) } }) }, ........ }
此处用到了一个函数：backendMenusToRouters，这个函数定义在src/libs/util.js中，用来对后端返回的路由数据递归处理，行程vue的路由。
export const backendMenusToRouters = (menus) => { let routers = [] forEach(menus, (menu) => { // 将后端数据转换成路由数据 let route = backendMenuToRoute(menu) // 如果后端数据有下级，则递归处理下级 if (menu.children && menu.children.length !== 0) { route.children = backendMenusToRouters(menu.children) } routers.push(route) }) return routers }
修改src/router/index.js，增加动态路由加入逻辑，主要方法：
const initRouters = (store) => { //这个人登录了已经 if (store.state.user.hasGetInfo) { //路由加载过了 if (store.state.app.hasGetRouter && store.state.app.routers && store.state.app.routers.length > 0) { console.log("已经加载过了路由") } else { //加载路由 console.log("开始加载路由权限...") store.dispatch('getUserMenus').then(routers => { //此处routers已经是按照权限过滤后的路由了，没权限的，不加入路由，无法访问 //路由重置一下把404放最后 const newRouter = new Router({ routes, mode: config.routerModel }) router.matcher = newRouter.matcher; //把404加最后面，如果用router.push({name:'xxxx'})这种的话，404页面可能空白，用path:'/aa/bb' router.addRoutes(routers.concat([{ path: '*', name: 'error_404', meta: { hideInMenu: true }, component: () => import(/* webpackChunkName: "404" */'@/view/error-page/404.vue') }])) }).finally(() => { }) } }}
每次路由加载之前，都会判断是否已经初始化过系统路由，如果没有，则初始化。
至此，动态路由基本实现。文章可能有遗漏和不足,欢迎探讨。第二种实现方式
具体实现，请参见： https://github.com/MayBeWrong/iview-admin-dynamic-router