为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题


Posted in Javascript onApril 03, 2018

用过vue-router都知道它可以实现模块js的懒加载,即只有当需要时才去加载对应模块的js脚本文件,以加速主页的显示。比如只有第一次用户点击某个“用户信息”按钮或菜单时,才下载“用户信息”这个模块的js组件。

懒加载的实现,依赖与webpack下AMD模式require函数的功能。webpack会将异步require的文件生成一个独立的js文件,调用时异步下载这个js且在完成后再执行它。开发项目中实现的关键代码是:

const basicInfo = {
  path: '/user',
  component: resolve => require(['./basicInfo.vue'], resolve) 
}
//然后将这个basicInfo加入路由表中

但是这里有个问题:从用户点击“用户信息”菜单开始,到js文件下载完毕执行开始,由于从网络下载js有一个时间延迟,这期间用户界面是没有任何响应的,让用户感觉点上去无效,常会重复再次点击。特别是js文件大而网速慢时更明显。因此,在这个过程中添加一个Loading的加载提示很有必要。

我们分析这行代码:

resolve => require(['./basicInfo.vue'], resolve)

它是一个函数,执行了require的过程,完成后再调用resolve回调函数。我们只要封装一下,在require执行之前显示Loading,然后在加载完成执行回调的时候隐藏Loading,也就实现这个需求了。如下:

const basicInfo = {
  path: '/user',
  component: resolve => {
    [显示Loading]
    require(['./basicInfo.vue'], component => {
      [隐藏Loading]
      resolve(component)
    })
  }
};

显示和隐藏Loading的代码,可根据自己的UI框架处理就行。比如element-ui:

import { Loading } from 'element-ui';
var unique;
export default {
  show() {
    let opt = {body: true, text: 'Loading...'};
    if(!unique) unique = Loading.service(opt);
  },
  resolve(resolve) {
    return function (component) {
      if (unique) {
        unique.close();
        unique = null;
      }
      resolve(component)
    }
  }
}
const basicInfo = {
  path: '/user',
  component: resolve => {
    spinRoute.show();
    require(['./basicInfo.vue'], spinRoute.resolve(resolve))
  }
};

以上在vue-router 2.3.1通过。

总结

以上所述是小编给大家介绍的为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS类的封装及实现代码
Dec 02 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 #Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 #Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 #Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 #Javascript
vue 组件中slot插口的具体用法
Apr 03 #Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 #Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 #Javascript
You might like
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
在Python中表示一个对象的方法
2019/06/25 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
python数据分析:关键字提取方式
2020/02/24 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
庆八一活动方案
2014/01/25 职场文书
商场促销活动策划方案
2014/08/18 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
2019销售早会主持词
2019/06/27 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
MySQL数据库完全卸载的方法
2022/03/03 MySQL
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android