vue keep-alive 組件切換echarts不顯示


問題描述:

最近開發 H5+ APP ,首頁是兩個echarts的折線圖,由於項目應用了 keep-alive ,導致這個組件在顯示的時候,有時候並不會走 mounted 函數,而且在切換到其他頁面,再切換回來的時候,這個折線圖是不顯示的

 

解決方案:

 

 

 

 第一個問題是有時候進入頁面並不會調用 mounted 函數,解決方案是把數據加載放到 activated 函數中

因為 keep-alive 會緩存頁面,所以頁面在重新進入時,不會重新加載,所以不會執行 mounted 函數,但是只要是這個頁面被激活,就一定會執行 activated 方法,所以在 activated 方法中判斷數據是否已經存在,如果不存在就調用后台接口加載數據

第二個問題是頁面切換回來時,echarts有數據也不顯示,那么讓 echarts 組件在離開時刪除,頁面激活時再重新渲染 echarts 組件即可

這里只需要應用 v-if 這個屬性的特性,當值為true時渲染組件,值為false時刪除組件,而這個刪除組件的時機就是頁面離開時,也就是 deactivated ,重新渲染的時機就是頁面激活時,也就是 activated 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM