vue动态添加路由,element-admin后台路由

很多后台项目的菜单都是可配置的
所以需要从后台取到菜单数据并加到路由映射用

1.第一步,将后台数据转换成vue-router 需要的数据格式,以下是路由格式

declare type RouteConfig = {
  path: string; //路径
  component?: Component;//对应模块
  name?: string; // 命名路由
  components?: { [name: string]: Component }; // 命名视图组件
  redirect?: string | Location | Function;
  props?: boolean | Object | Function;
  alias?: string | Array;
  children?: Array; // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void;
  meta?: any;

  // 2.6.0+
  caseSensitive?: boolean; // 匹配规则是否大小写敏感？(默认值：false)
  pathToRegexpOptions?: Object; // 编译正则的选项
}

这里特别要注意的是component的写法
component = () => import(@/views${nm.path})

webpack 编译es6 动态引入 import() 时不能传入变量，例如import(dir) , 而要传入字符串 import(‘path/to/my/file.js’)，这是因为webpack的现在的实现方式不能实现完全动态。

但一定要用变量的时候，可以通过字符串模板来提供部分信息给webpack；例如import(./path/${myFile}), 这样编译时会编译所有./path下的模块，但运行时确定myFile的值才会加载，从而实现懒加载。

最后再用
router.addRoutes(accessRoutes)
将转换好的数组添加到路由映射中

这里有一点需要注意,就是addRoutes应放在路由守卫

router.beforeEach(async(to, from, next) => {
       router.addRoutes(accessRoutes)
})