vue-router懒加载时添加loading效果

mingde 发布于2019-08-23 13:13 / 2918人阅读

摘要：近期在做一个微信公众号的项目，在页面跳转时发现页面会闪一下，用户体验很不好，而且如果网慢时页面是没有数据的样式会乱很丑。唯一的缺点就是在运行没问题，但是会有时关不上效果一直处于状态而且很频繁，刚开始我以为是网络的问题，后台切换到还是不行。

近期在做一个微信公众号的项目，在页面跳转时发现页面会闪一下，用户体验很不好，而且如果网慢时页面是没有数据的样式会乱很丑。于是乎，就百度看了前人的各种解决方案，个人觉得以下链接中的方案还是很好的，代码简洁，效果也很满意，不需要每个页面做相对应的操作只需要在router.js文件中添加几行代码即可。

https://www.jb51.net/article/...

唯一的缺点就是在Android运行没问题，但是ios会有时关不上loading效果一直处于loading状态（而且很频繁），刚开始我以为是网络的问题，后台切换到4G还是不行。我就各种调试，后来发现加上一个setTimeout便完美的解决了问题，代码如下：

import Vue from "vue"
import Router from "vue-router"
//loading组件
import {Indicator} from "mint-ui";

Vue.use(Router)
let spinRoute = {
    show() {//加载中显示loading组件
            Indicator.open({spinnerType: "fading-circle"});//开启loading组件，这里我用的mint-ui
    },
    resolve(resolve) {//加载完成隐藏loading组件
        return component=>{
            setTimeout(()=>{
                Indicator.close()//关闭loading组件
                resolve(component);
            }, 10)
        }
    }
}
export default new Router({
    mode: "hash",
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/home",
            name: "home",
            component: resolve => {
                spinRoute.show();//加载时开启loading
                require(["./views/Home.vue"], spinRoute.resolve(resolve))//路由懒加载
            },
            meta: {
                title: "首页"
            },
        },
        {
            path: "/QRcode",
            name: "QRcode",
            component: resolve => {
                spinRoute.show();
                require(["./views/QRcode.vue"], spinRoute.resolve(resolve))
            },
            meta: {
                title: "游戏推广"
            }
        },
        {
            path: "/NotAgent",
            name: "NotAgent",
            component: resolve => {
                spinRoute.show();
                require(["./views/NotAgent.vue"], spinRoute.resolve(resolve))
            },
            meta: {
                title: "友情提示"
            }
        },
        {path:"*",redirect:"/home"}
    ]
})

最后，感谢以上链接中的大牛给到大家的解决方案.

云服务器 GPU云服务器加载loading效果懒加载懒加载异常 javascript懒加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99297.html

代码分割与懒加载情况下（code-splitting+lazyload）抽离懒加载模块的公用模块代码

摘要：但是同时，抽离到父模块，也意味着如果有一个懒加载的路由没有用到模块，但是实际上引入了父模块，也为这也引入了的代码。前言我们清楚，在 webpack 中通过CommonsChunkPlugin 可以将 entry 的入口文件中引用多次的文件抽离打包成一个公用文件，从而减少代码重复冗余 entry: { main: ./src/main.js, ...

zebrayoung 2019-08-22 16:04 评论0 收藏0
vue项目首页加载速度优化

摘要：凡是做的项目，特别是移动端的项目，首屏加载速度必定是一个绕不过去的话题。大家知道这些依赖库的文件都会被一起打包到那个文件里面，如果这些你的第三方依赖库很多，很大的话，那就会导致这个文件很大，那首屏加载的速度肯定会被拖慢。凡是做SPA的项目，特别是移动端的SAP项目，首屏加载速度必定是一个绕不过去的话题。接下来我就我们项目里的一些实践来做一下总结。希望抛砖引玉，如果各位有更好的方案，不...

rickchen 2019-08-21 17:06 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

Tecode 2019-08-23 16:02 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

APICloud 2019-08-02 14:34 评论0 收藏0
Vue.js应用性能优化：第二部分---路由懒加载和 Vendor bundle 反模式

摘要：现在，我们将更深入地研究，并学习用于分割应用程序最实用的模式。本系列文章基于对性能优化过程的学习。路径时才被下载。为了便于理解，文件名称并不是由生成的真实名称。接下来，我们将学习其他部分和单独的组件也能够从主文件分割出来并延迟加载。在前一篇文章中，我们学习了什么是代码分割，它是如何与 Webpack 一起工作的，以及如何在Vue应用程序中使用延迟加载。现在，我们将更深入地研究，并学习...

0x584a 2019-08-26 13:45 评论0 收藏0