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)
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近学习了一下websocket的即时通信，感觉非常的强大，这里我用node启动了一个服务进行websocket链接，然后再vue的view里面进行了链接，进行通信，废话不多说，直接上代码吧2020-02-02
Vue.js 是一个用于构建用户界面的渐进式框架,本文主要为大家整理了一些常用的 Vue 方法及其详细说明和代码示例,有需要的小伙伴可以参考一下2023-11-11
这篇文章主要介绍了until将watch最常用的逻辑进行封装简化代码写法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
vite打包出现"default" is not exported by "no
这篇文章主要给大家介绍了关于vite打包出现"default" is not exported by "node_modules/...问题解决的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue两次赋值页面获取不到的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。下面这篇文章主要给大家介绍了关于Vue.js组件间循环引用的相关资料,文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-12-12
这篇文章主要介绍了Vue实现自定义下拉菜单功能,文章先通过实例代码给大家介绍，后面对用到的知识点总结，需要的朋友可以参考下2018-07-07
这篇文章主要给大家介绍了关于vue项目中使用scss的详细方法步骤,scss是一种css预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性,让css更加简洁、适应性更强,可读性更佳,需要的朋友可以参考下2023-11-11
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
今天小编就为大家分享一篇基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue-gird-layout组件封装示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
最新评论