博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue-router懒加载时添加loading效果
阅读量:7024 次
发布时间:2019-06-28

本文共 1783 字,大约阅读时间需要 5 分钟。

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

唯一的缺点就是在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'}    ]})

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

转载地址:http://dspxl.baihongyu.com/

你可能感兴趣的文章
js scheme 打开手机app的方法
查看>>
【Hadoop】HADOOP 总结--思维导图
查看>>
java读写锁实现数据同步访问
查看>>
原生的社交分享
查看>>
delphi IOS 获取电池信息
查看>>
Unity3D 避免玩家作弊
查看>>
springMVC-数据的格式化
查看>>
JavaWeb学习笔记——JDOM
查看>>
bootstrap编码规范
查看>>
mongodb 简单部署方案及实例
查看>>
Adobe推出HTML5动画设计工具Edge
查看>>
检查使用共享表空间的表
查看>>
ArcGIS Server的切图原理深入【转】
查看>>
recyclerView插入(add)和删除(remove)item后,item错乱,重复,覆盖在原recyclerView上
查看>>
关于ftpshell脚本中mget中去除多余交互式提示的方法
查看>>
移动平台自动化测试从零开始-MonkeyRunner工具使用 (第二节)
查看>>
【320】Python 2.x 与 3.x 的区别
查看>>
Hyper-V应用指南之3-理解并配置Hyper-V虚拟网络[转]
查看>>
android Monkey test测试
查看>>
.net注册iis
查看>>