解决vue的router组件component在import时不能使用变量问题


Posted in Javascript onJuly 26, 2020

解决vue的router组件component在import时不能使用变量问题

webpack 编译es6 动态引入 import() 时不能传入变量,例如dir ='path/to/my/file.js' ; import(dir) , 而要传入字符串 import(‘path/to/my/file.js'),这是因为webpack的现在的实现方式不能实现完全动态。

但一定要用变量的时候,可以通过字符串模板来提供部分信息给webpack;例如import(./path/${myFile}), 这样编译时会编译所有./path下的模块,但运行时确定myFile的值才会加载,从而实现懒加载。

import语法参考资料如下:点击进入

修改后

解决vue的router组件component在import时不能使用变量问题

补充知识:由vue-router中component: ()=>import()引发的ES6箭头函数的语法问题

Vue-router动态加载组件的语法方式为:

component: ()=>import()

最近在项目中不下心写成了

component: ()=>{import()}

由此引发了ES6中箭头函数语法的问题:

1. ()=>: 没有{}的时候,箭头函数指向的就是这个函数的返回值(对应的组件,这个路由就会显示内容啦);

2.()=>{}: 有{}的时候,箭头函数在没有指明return的时候什么都不返回(对应的组件,这个路由就什么都不会显示啦)

另外,webpack3的Magic Comments,可以指定打包文件是的chunk的名字,写法如下:

component: ()=>import(/* webpackChunkName: "chunkName" */ )

以上这篇解决vue的router组件component在import时不能使用变量问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
Element Steps步骤条的使用方法
Jul 26 #Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 #Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 #Javascript
VUE动态生成word的实现
Jul 26 #Javascript
Element Dialog对话框的使用示例
Jul 26 #Javascript
在vue中使用防抖函数组件操作
Jul 26 #Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 #Javascript
You might like
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
详解webpack自动生成html页面
2017/06/29 Javascript
React组件生命周期详解
2017/07/03 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
python程序封装为win32服务的方法
2021/03/07 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python打开使用的方法
2019/09/30 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
哈弗商学院毕业生求职信
2014/02/26 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
单位委托书
2014/10/15 职场文书
公司授权委托书
2014/10/17 职场文书
交通事故案件代理词
2015/05/23 职场文书