解决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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
javascript的console.log()用法小结
May 31 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
详解JavaScript中的Object.is()与"==="运算符总结
Jun 17 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的类树(支持无限分类)
2006/10/09 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
自我评价范文
2013/12/22 职场文书
成绩单家长评语大全
2014/04/16 职场文书
优秀求职信
2014/05/29 职场文书
归途列车观后感
2015/06/17 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL