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

前端之家收集整理的这篇文章主要介绍了为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

require(['./basicInfo.vue'],resolve) } //然后将这个basicInfo加入路由表中

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

我们分析这行代码

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

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

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

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

{ spinRoute.show(); require(['./basicInfo.vue'],spinRoute.resolve(resolve)) } };

以上在vue-router 2.3.1通过。

总结

以上所述是小编给大家介绍的为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/32904.html

猜你在找的Vue相关文章