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)
}

总结

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

您可能感兴趣的文章:

ElementUI日期选择器时间选择范围限制的实现
在日常开发中，我们会遇到一些情况，限制日期的范围的选择，本文就详细的介绍了ElementUI日期选择器时间选择范围限制的实现，文中通过示例代码介绍的非常详细，感兴趣的可以了解一下
2022-04-04
分享12个Vue开发中的性能优化小技巧(实用!)
一般来说,你不需要太关心vue的运行时性能,它在运行时非常快,但付出的代价是初始化时相对较慢,下面这篇文章主要给大家分享介绍了十二个Vue开发中的性能优化小技巧,需要的朋友可以参考下
2022-02-02
Vue实现Hover功能(mouseover与mouseenter的区别及说明)
这篇文章主要介绍了Vue实现Hover功能(mouseover与mouseenter的区别及说明)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue中跨域以及sessionId不一致问题及解决
这篇文章主要介绍了vue中跨域以及sessionId不一致问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
一个因@click.stop引发的bug的解决
这篇文章主要介绍了一个因@click.stop引发的bug的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
详解在vue中如何实现屏幕录制与直播推流功能
屏幕录制和直播推流是现代Web应用中常用的功能,Vue作为一种流行的JavaScript框架,提供了一些工具和库,可以方便地实现屏幕录制和直播推流功能,本文将介绍如何在Vue中进行屏幕录制和直播推流,需要的朋友可以参考下
2024-01-01
vue3内嵌iframe的传参与接收参数代码示例
这篇文章主要给大家介绍了关于vue3内嵌iframe的传参与接收参数的相关资料,Vue项目中使用iframe及传值功能相信有不少人都遇到过,需要的朋友可以参考下
2023-07-07
vue页面使用阿里oss上传功能的实例（一）
本篇文章主要介绍了vue页面使用阿里oss上传功能的实例（一），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
Vuex入门到上手教程
这篇文章主要介绍了Vuex入门到上手教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
一文详解vue2的diff算法流程
本篇文章将会尝试从算法的角度主要聊一聊vue2的diff策略,帮助读者朋友在遇到相关的面试题时可以和面试官谈笑风生,文中有相关的图解和代码示例,感兴趣的同学跟着小编一起来看看吧
2023-08-08