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<string>; children?: Array<RouteConfig>; // 嵌套路由 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) })