办理vue-router组件调用后端数据天生动态路由时import不能利用变量

程序员 · 2024-9-15 22:42:44

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

办理vue-router组件调用后端数据天生动态路由时import不能利用变量

所属分类: 问答交流

新帖推荐: 30日

推荐作品