最近在使用vue作为用户权限时遇到一个问题：路由数据是后端根据用户角色生成的路由表，前端通过addRoutes()vue-router的方法添加它。后端返回给我的数据格式如下：filePath对应router对象中的component字段，router的component是通过import导入的文件，后端返回文件路径的字符串给我，然后如何动态导入这些文件？解决方案：其实vue给我们提供了加载异步组件的方法：https://cn.vuejs.org/v2/guide...如图，vue组件注册接收一个resolve回调方法，通过在这个方法中一个特殊的require可以成功导入filePath指向的文件。route.component=resolve=>require([`@/views/${item.filePath}`],resolve)注意：1.如果一些未使用的文件在使用该方法后出现语法错误或者缺少依赖，即使这个文件没有全局使用，会报错。我的猜测是，使用这个方法后，webpack会默认把所有的文件都打包进去，相当于导入所有的文件，所以我们可以在异步获取到路由后使用import或者require来导入文件。2、动态路由的path字段必须使用全路径，否则会报错。当我们在router{path:'a',name:'first-levelroute',component:{render(c){returnc('router-view')}}中注册嵌套路由时，meta:{title:'First-levelrouting'},children:[{path:'b',name:'二级路由',component:()=>import('@/views/assetsCenter/index.vue'),meta:{title:'二级路由'}}]}这种情况下，当我们进入二级路由b页面时，路径会自动帮我们补全，变成/a/b，但是在动态路由中，如果我使用path字段像这样会跳转到404，需要改成{path:'/a',name:'Level1route',component:{render(c){returnc('router-view')}},meta:{title:'Level1Route'},children:[{path:'/a/b',name:'secondaryroute',component:()=>import('@/views/assetsCenter/index.vue'),meta:{title:'二级路由'}}]}
