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刷新页面后params参数丢失的原因和解决方法,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue中封装axios并实现api接口的统一管理的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
本篇文章主要介绍了VUE实现表单元素双向绑定（总结） ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了vue实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要介绍了vuepress打包之后页面样式丢失问题的两种解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
在Vue3中watch特性进行了一些改变和优化,与computed不同,watch通常用于监听数据的变化,并执行一些副作用,这篇文章主要给大家介绍了关于VUE3数据侦听的相关资料,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Vue-CLI与Vuex使用方法,结合实例形式分析了Vue-CLI创建项目与Vuex相关概念、使用方法及操作注意事项,需要的朋友可以参考下2020-01-01
Vue/React子组件实例暴露方法(TypeScript)
最近几个月都在用TS开发各种项目，框架有涉及到Vue3,React18等，记录一下Vue/React组件暴露出变量/函数的方法的写法，对vue react组件暴露方法相关知识感兴趣的朋友跟随小编一起看看吧2022-11-11
Vue3+Element-Plus使用Table预览图片发生元素遮挡的解决方法
这篇文章主要介绍了Vue3+Element-Plus使用Table预览图片发生元素遮挡的问题分析和解决方法,文中通过代码示例讲解的非常详细,对大家解决问题有一定的帮助,需要的朋友可以参考下2024-04-04
最新评论