vue-antd-admin路由配置以及动态菜单配置

首先在main.js主入口文件内调用了initRouter方法

const router = initRouter(store.state.setting.asyncRoutes) //加载路由

然后把视角转向router/index.js文件内部，可以看到initRouter方法，从这里开始来进行路由动态菜单的分析，方法内依据isAsync来进行三元判断是采用异步加载路由还是采用本地路由，默认isAsync为false，也就是采用本地路由，但是在实际项目开放中，我们一定是通过接口返回路由配置进行异步加载，动态生成菜单的，这里只需要将isAsync改为true即可，那么isAsync在哪里进行配置呢？
在vue-antd-admin中，有一个config配置文件夹，找到setting-config.js文件，内部我们可以看到整个系统的配置项，找到isAsync，做修改即可。回到initRouter方法，其中有一个formatRoutes方法，这个方法的作用是什么呢？
1.把配置项中path不以/开头的都加上斜杠 /
2.遍历各个路由配置项中是否在meta元数据中加了权限配置，没有则都加上permisson:*
做完后就通过new Router(options)返回router对象。
至此，获取到router对象以后，我们就需要把路由对象挂载到Vue中，
bootstrap({router, store, i18n, message: Vue.prototype.$message}) //初始化路由以及路由守卫、axios拦截器

//对应的方法
function bootstrap({router, store, i18n, message}) {
  // 设置应用配置
  setAppOptions({router, store, i18n})
  // 加载 axios 拦截器
  loadInterceptors(interceptors, {router, store, i18n, message})
  // 加载路由
  loadRoutes()
  // 加载路由守卫
  loadGuards(guards, {router, store, i18n, message})
}

项目中，获取到路由配置是在登录步骤进行的，当登录拿到配置以后，调用了loadRoutes方法进行加载路由，那么loadRoutes做了什么事情？
查看routerUtil.js文件可以知道，这个方法是把配置的路由数据和本地同步路由数据做合并，重新挂载到Vue中，同事吧菜单数据存到store中，后面就只需要那数据，渲染就ok了，具体渲染可查看相关文件分析，在此不做详细解释。