为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 相关文章推荐
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
从0开始学Vue
Oct 27 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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 pki加密技术(openssl)详解
2013/07/01 PHP
php之可变变量的实例详解
2017/09/12 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
Python中__name__的使用实例
2015/04/14 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Python单例模式的两种实现方法
2017/08/14 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
python实现人民币大写转换
2018/06/20 Python
python框架中flask知识点总结
2018/08/17 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
可靠的数据流传输TCP
2016/03/15 面试题
大一新生军训时的自我评价分享
2013/12/05 职场文书
邓小平理论心得体会
2014/09/09 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
致运动员加油稿
2015/07/21 职场文书