为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 相关文章推荐
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
js实现分页功能
May 24 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
ES6箭头函数和扩展实例分析
May 23 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 Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
PHP模块化安装教程
2016/06/01 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
angular.element方法汇总
2015/01/07 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
JS作用域深度解析
2016/12/29 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
英国电子专家:maplin
2019/09/04 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
简历自荐信
2013/12/02 职场文书
房产销售经理职责
2013/12/20 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
万能检讨书2000字
2014/10/17 职场文书
瘦西湖导游词
2015/02/03 职场文书
公司文体活动总结
2015/05/07 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
Vue如何清空对象
2022/03/03 Vue.js