码迷,mamicode.com
首页 > 其他好文 > 详细

vue实战之狗血事件:页面loading效果诡异之事

时间:2018-08-19 15:41:09      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:自动   rom   不显示   没有   from   mit   sub   store   vsc   

接上回

想加一个切换路由时,跳出一个loading动画 ,路由加载后就消失

先做了一个loading提示的浮动层的组件,全局注册,在几个路由页面都引入

在vuex里面维护一个变量比如isLoading:false,用于是否显示loading组件

在loading组件中以computed方式自动依赖这个变量

在路由的beforeEach里面:

router.beforeEach((to,from,next)=>
store.commit(‘setLoading‘,true) next()
});

路由加载后,就设为false (注意,afterEach里面没有next)

router.afterEach((to,from) =>{
    store.commit(‘setLoading‘,false)
});

测试了一下,很奇怪,有时可以显示loading,有时不显示

用浏览器vue开发插件查看vuex变量isLoading,有时不变有时变

但每次切换路由都能控制台打印出消息

由于今天用的是08年的狗血笔记本,真特么 狗血笔记本出狗血事件,装win7运行特慢,编译也慢,

切换vscode竟然也要几秒,蠢货sublime竟然莫名其秒老是占满cpu

折腾了2小时,突然想到,把next()放在定时器里面,延迟500ms

没想到竟然可以了,猜测是next()执行下一个路由太快了

导致isLoading变量显示太快,loading动画来不及闪

vue实战之狗血事件:页面loading效果诡异之事

标签:自动   rom   不显示   没有   from   mit   sub   store   vsc   

原文地址:https://www.cnblogs.com/vbyzc/p/9501173.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!