import() 动态加载component组件失败
在写 vue+element 从后台获取数据写导航栏 时,当我加载动态路由,import() 总是失败。
假设 path: “@/views/Home.vue”,name: “Home”。
一、使用 import()
语法加载组件
参考:“Cookysurongbin”的 解决vue动态路由异步加载import组件,加载不到module的问题
arr[i].children[j].component = () => import("@/views/Home.vue") //没有问题
arr[i].children[j].component = () => import(`${arr[i].children[j].component}`) //报错
1. 原因: 应该是在 webpack,webpack 编译 es6 动态引入 import() 时不能传入变量,因为 webpack 的现在的实现方式不能实现完全动态。
2. 解决办法: 可以通过字符串模板来提供部分信息给 webpack。
例如:import(@/${path}
), 这样编译时会编译所有 @/views 下的模块,但运行时确定 path 的值才会加载,从而实现懒加载。
如果写了@给webpack还是不能识别,那么可能你需要多些几级的路径,如:
arr[i].children[j].component = () => import(`@/views/${name}.vue`);
由于我粗心大意,不小心漏掉了 () =>
,这样写完之后,报错(原本是没有错的):[Vue warn]: Failed to mount component: template or render function not defined.
,很多文章上说使用 require
加载组件。
二、使用 require
加载组件
arr[i].children[j].component = (resolve) => require([`@/views/${name}.vue`], resolve);//成功
具体的可以去看掘金上 webpack动态导入和require.context分析及使用注意 这篇文章。
因为我让后台在每个子路由中都返回了 component 字段,所以上面这种情况不太现实。
arr[i].children[j].component = resolve => require([`@/views/${arr[i].children[j].component}.vue`],resolve); //报错
参考了 “ddx2019” 的 动态路由中,有一步需将后端传回的component 的字符串模式,改为我们前端路由需要的component模式,报错Cannot find module
function _import(str) { // views文件夹下的Home组件,传入的格式为 'Home'return function (resolve) {require([`@/views${str}.vue`], resolve);};
}//使用
arr[i].children[j].component = _import(arr[i].children[j].component);
import() 动态加载component组件失败相关推荐
- reactjs通过lazy函数配合import函数动态加载路由组件
路由组件的lazyLoad //1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包const Login = lazy(()=>i ...
- vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件 目录结构 index.html components/component1 components/ ...
- netcore实践:跨平台动态加载native组件
缘起netcore框架下实现基于zmq的应用.在.net framework时代,我们进行zmq开发由很多的选择,比较常用的有clrzmq4和NetMQ. 其中clrzmq是基于libzmq的Inte ...
- Vue(二十八)el-cascader 动态加载 - 省市区组件
1.后台接口为点击加载下一级 ,传省市区id <template><el-cascaderv-model="selectedOptions"placeholder ...
- [加载XlUE组件失败,迅雷看看桌面图标已损坏,请重新安装。]问题处理
早上在工作时,金山卫士弹出说可以卸载什么可以提长什么的,想也没想就点确定... 结果噩梦开始了,一整天,电脑都一直弹出: 一直弹! 卸载再重装还是一样,搜索了一下,方法无外夫就是重装,换个盘重装,哥从 ...
- angular使用动态组件后属性值_Angular动态加载组件
引言 有时候需要根据URL来渲染不同组件,我所指的是在同一个URL地址中根据参数的变化显示不同的组件:这是利用Angular动态加载组件完成的,同时也会设法让这部分动态组件也支持AOT. 动态加载组件 ...
- 踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件,不能使用别名alias
2021.8.12 坑50(vue-router4.addRoute().router.options.routes未更新):进行动态权限获取菜单的设置,使用了addRoute()来添加路由,但是ro ...
- qt widget加载qml_Qml组件小知识
介绍组件构造,销毁,动态加载小知识. 对象/组件都具有类似C++的构造函数和析构函数 onCompleted对象构造完成自动执行: onDestruction对象销毁前自动执行. QtObject { ...
- ExtJS4.x动态加载js文件
动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.j ...
最新文章
- 负载均衡(Load Balancing)学习笔记(二)
- leetcode174. 地下城游戏(动态规划)
- html 控制文字的标签,html里面有一个控制文字滚动的标签marquee,比较有用。
- 尚学堂java答案解析 第三章
- u-boot源码配置原理分析
- 迁移solaris ufs根文件系统至zfs根文件系统
- not1,not2,bind1st,bind2nd
- Codeforces 888E - Maximum Subsequence
- HTML5 WebGame开源工具之impactjs
- 信创办公--基于WPS的Word最佳实践系列(应用导航窗格:轻松掌握文章结构)
- 1055 集体照 (25 分)
- 如何找到mysql的初始密码_如何查看mysql的初始密码
- 计算机管理 网络连接服务,电脑出现无法连接网络问题怎么解决
- 消息中间件选型分析:从 Kafka 与 RabbitMQ 对比
- java 排序库_Java数据库排序
- GitHub上最火的40个iOS开源项目
- 猫眼数据SQLITE保存格式
- Android 以图找图功能
- 【SPSS】交叉设计方差分析和协方差分析详细操作教程(附案例实战)
- 微信小程序连接百度地图API实现天气查询