vue中动态路由加载组件,找不到module问题及解决

更新时间：2023年06月30日 11:07:10 作者：齐天大头

这篇文章主要介绍了vue中动态路由加载组件,找不到module问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue动态路由加载组件，找不到module

vue动态加载路由并挂载到vue。

路由信息由后端给出，同时component的路径也是后端给出，但是动态加载该路径会报错。

原因

webpack 编译es6 动态引入 import() 时不能传入变量，因此webpack目前不能做到完全的动态加载路由

解决方案

在import时，拼接一个静态的字符串，这样webpack就可以正常加载了。

 temp.component = () => import(`@/views/${menu.menuVueComponent}`) // 正确
 temp.component = () => import(`${menu.menuVueComponent}`) // 不能加载
 temp.component = () => import(menu.menuVueComponent) // 不能加载

前面直接拼@/会有一个scss样式报错，因为我在这里用的是vue-admin-template，可能是模板本身的问题，完全自己编写的后端不清楚会不会这样，如果@/不行，就多拼几层目录

vue动态路由加载时Cannot find module xxx错误解决

vue由静态路由改为动态路由时，出现下面的错误

在这里插入图片描述

静态路由懒加载，当我们把在router里面，把它写死在ts里时，它加载的ok的，可是我们通过api接口拉取过来的数据时，发现是不报了上面的错

// 静态路由懒加载
export const loadView = (view: any) => {
  return () => import(`@/views/${view}.vue`)
}

错误原因是webpack打包逻辑，webpack4中动态import不支持变量方式，查看路由返回的信息，只是返回一个方法。

在这里插入图片描述

而静态路由的返回，这个才是正确的组件返回方式

在这里插入图片描述

但是我们是要改为动态路由，则必须把它修改为

在这里插入图片描述

这样动态路由加载就OK了

export const loadView = (view: any) => {
  return (resolve: any) => require([`@/views/${view}.vue`], resolve)
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue中Video标签播放解析后短视频去水印无响应解决
这篇文章主要为大家介绍了Vue中使用Video标签播放＜解析后的短视频＞去水印视频无响应的解决方式，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
Element el-button 按钮组件的使用详解
这篇文章主要介绍了Element el-button 按钮组件的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02
100行代码理解和分析vue2.0响应式架构
通过100行代码帮助大家理解和分析vue2.0响应式架构的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
Vue中使用 Aplayer 和 Metingjs 添加音乐插件的方式
这篇文章主要介绍了Vue中使用 Aplayer 和 Metingjs 添加音乐插件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
vue中实现代码高亮与语法着色的方法介绍
在Vue的开发过程中，我们经常需要展示代码片段或者进行代码高亮与语法着色，Vue提供了多种方式来实现代码高亮与语法着色，本文将为你详细介绍这些方法,需要的朋友可以参考下
2023-06-06
vue2前端使用axios发起post请求后端(springboot)接收不到值解决办法
这篇文章主要介绍了vue2前端使用axios发起post请求后端(springboot)接收不到值解决办法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
2024-03-03
Vue.js 图标选择组件实践详解
这篇文章主要介绍了Vue.js 图标选择组件实践详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
Vue+Electron打包桌面应用(超详细完整教程)
这篇文章主要介绍了Vue+Electron打包桌面应用超详细完整教程,在这大家要记住整个项目的json文件不能有注释,及时没报错也不行,否则运行命令时还是有问题,具体细节问题参考下本文详细讲解
2024-02-02
vue parseHTML源码解析hars end comment钩子函数
这篇文章主要为大家介绍了vue parseHTML源码解析hars end comment钩子函数示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
一文带你掌握Vue Router4进行页面跳转处理
Vue Router是Vue.js官方的路由管理器,它能让你用组件化的思维来管理你的页面和视图,这篇文章会带你从零开始介绍Vue Router4处理页面跳转的相关知识吧
2025-12-12