解决vue-router组件调用后端数据生成动态路由时import不能使用变量
- 移动端
- 忘了呼吸的那只猫
- 0
当需要使用后端数据来生成动态路由是遇到一个问题:
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)
免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。
