1. 程式人生 > >vue實戰之狗血事件:頁面loading效果詭異之事

vue實戰之狗血事件:頁面loading效果詭異之事

after 不變 編譯 全局 before 組件 定時器 route vuex

接上回

想加一個切換路由時,跳出一個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效果詭異之事