zoukankan      html  css  js  c++  java
  • 为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通过。

  • 相关阅读:
    初识python 2.x与3.x 区别
    装饰器
    函数的进阶
    Spring Boot启动问题:Cannot determine embedded database driver class for database type NONE
    22.Spring Cloud Config安全保护
    23.Spring Cloud Bus 无法更新问题(踩坑) Spring cloud config server Could not fetch remote for master remote
    24.Spring Cloud之Spring Cloud Config及Spring Cloud Bus
    Spring Boot整合Spring Data Elasticsearch 踩坑
    项目中Spring Security 整合Spring Session实现记住我功能
    32.再谈SpringBoot文件上传
  • 原文地址:https://www.cnblogs.com/hz-blog/p/vue-router-download-js-loading.html
Copyright © 2011-2022 走看看