vue3-vite动态路由导入组件不能使用模板字符串的问题
vue3-vite 动态路由 动态导入组件不能使用模板字符串的问题
·
还原问题:
动态路由实现(参考博客):https://blog.csdn.net/weixin_42510962/article/details/112618116
在我写动态路由的时候,菜单信息是从数据库中获取的。代码如下:
let rts = []
// 设置动态路由
function setMoveRouter(menus){
for (let i = 0; i < menus.length; i++) {
let rt = {
path: menus[i].menuPath,
component: ()=>import('@/views/system/LoginLog.vue') // 问题代码:暂时还没问题
meta:{title:menus[i].menuName}
}
rts.push(rt) //这里就将每个菜单的路由push进去了
// if (menus[i].childMenuList && menus[i].childMenuList.length > 0) { //当存在子菜单时
// setMoveRouter(menus[i].childMenuList) //递归实现子菜单的路由设置
// }
}
刚开始被动态路由折磨了很久,为了一步步验证问题,暂时把导入组件写死了,。诶效果出来了,返回了对应的界面。
而后,我开始换成动态的时候,代码如下
component: ()=>import(`@/views/${menus[i].menuComponent}`) // 问题代码:开始有问题了
报错了:我郁闷了,这路径没错啊,返回确认路径,及数据库路径,实在是没问题。
于是我打印路由信息: console.log(router.getRoutes())
,第0个,点进去
而后百度这个异常异常:TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.s (<anonymous>:1:83
控制台也报警告:
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats.
If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.
经过一系列的百度,最终确定问题:是vue3 + vite 不能这样导入组件。
解决方案:
官网:vite glob
那么献上我的案例吧:
const modules = import.meta.glob('@/views/*/*.vue') // 导入
function setMoveRouter(menus){
for (let i = 0; i < menus.length; i++)
let rt = {
path: menus[i].menuPath,
component: modules[`@/views/${menus[i].menuComponent}`], // 这里 这里
meta:{title:menus[i].menuName}
}
rts.push(rt) //这里就将每个菜单的路由push进去了
}
更多推荐
已为社区贡献1条内容
所有评论(0)