为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
更新时间：2018年04月03日 16:24:30 作者：东篱南山
这篇文章主要介绍了为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题,需要的朋友可以参考下
用过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提示避免无响应问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由，介绍了相关原理，并对比了两种方式的优缺点与注意事项。最后分析了如何实现可以直接从文件系统加载而不借助后端服务器的Vue单页应用。2021-05-05
同大多数的前端框架一样，先读官网的使用方法。学会基本使用后，在实例中找到自己想要demo。拿过来改一改，一个echarts图表就形成，毕竟人家做就是为了方便使用，这篇文章主要介绍了Vue Echarts实现实时大屏动态数据显示2022-10-10
这篇文章主要介绍了vue导入.md文件的步骤（markdown转HTML），帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了vue input框的禁用和可输入问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了详解基于iview-ui的导航栏路径（面包屑）配置,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
本文通过实例代码给大家介绍了vue实现个人信息查看和密码修改功能，文中给大家补充介绍了vue实现密码显示隐藏切换功能，非常不错，具有一定的参考借鉴价值，感兴趣的朋友一起看看吧2018-05-05
这篇文章主要介绍了Vue3中watch的详解,主要包括Vue2使用watch及Vue3使用watch的方法，通过多种情况实例代码相结合给大家详细讲解，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了教你用Cordova打包Vue项目的方法，详细的介绍了如何Vue项目打包成app，具有一定的参考价值，有兴趣的可以了解一下2017-10-10
这篇文章主要介绍了vue项目中js文件使用vue的this实例说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了在Vuex中Mutations修改状态操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论