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

Posted 2020-12-30 vbyzc

接上回

想加一个切换路由时，跳出一个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动画来不及闪