解决vue-router组件调用后端数据生成动态路由时import不能使用变量

当需要使用后端数据来生成动态路由是遇到一个问题:

component:() =>import('@/xxx')

能够正常路由，改为变量形式

component :() =>  import('@/views/' + path + '.vue')

点击菜单路由视图并不加载，报错
Cannot find module

出现这个问题原因：

webpack 编译es6 动态引入 import() 时不能传入变量，例如

dir ='path/to/my/file.js'; 
import(dir) 

报错：Cannot find module

而要传入字符串

 import('path/to/my/file.js')

这是因为webpack的现在的实现方式不能实现完全动态。
但一定要用变量的时候，可以通过字符串模板来提供部分信息给webpack；例如import(./path/${myFile})(这种方式我使用vue2.6之后的版本好像就不能用了), 这样编译时会编译所有./path下的模块，但运行时确定myFile的值才会加载，从而实现懒加载。

解决方法：

将

component = import('@/views/' + path + '.vue')

替换为：

// resolve不能省略
component = resolve => require([`@/views/${path}.vue`], resolve)