当需要使用后端数据来生成动态路由是遇到一个问题:
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)