vue-router懒加载时添加loading效果
近期在做一个微信公众号的项目,在页面跳转时发现页面会闪一下,用户体验很不好,而且如果网慢时页面是没有数据的样式会乱很丑。于是乎,就百度看了前人的各种解决方案,个人觉得以下链接中的方案还是很好的,代码简洁,效果也很满意,不需要每个页面做相对应的操作只需要在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'} ] })
最后,感谢以上链接中的大牛给到大家的解决方案.
相关推荐
杉林的HelloWord 2013-09-13
mjx00 2017-08-09
icewizardry 2016-12-20
87433764 2017-09-28
dykun 2019-07-01
87443561 2017-09-28
87453169 2017-04-18
icewizardry 2016-12-20
momode 2019-06-27
88261841 2015-06-20
aganliang 2014-05-15
MegatronKings 2014-03-19
卧斋 2013-09-13
publicTIM 2013-06-18
Haoroid 2013-01-23
Chydar 2013-01-17
nicepainkiller 2019-06-20
83453065 2012-05-17