關於keep-alive緩存router-view時子組件切換后父組件頁面刷新的問題


近期入職的單位,希望頁面有緩存,想都沒想,第一反應就是keep-alive包裹router-view(思路為正解,且原先有解決的經驗)

結果,一寫出來,懵逼了,效果不是想要的!!!

開始找問題: 進入到子路由內,父級路由居然刷新了,這是什么神仙操作???

帶着一臉的疑惑,那就給父級路由也緩存上,看看效果,打開vue-devtools,發現在切換子路由的時候,父級路由的組件居然出現多個!!!

什么鬼這是,真照這樣下去,那不得卡死啊!!!

趕緊把父級路由的keep-alive去掉,再次切換子路由,看vue-devtools,每次切換都相當於生成個新的,這是為什么???

又是一臉的杠....

這操作給咱整蒙了都

因為以前寫過這個,都沒出現類似的問題,讓我都懷疑自己是不是上歲數了,忘了以前怎么寫的了,於是開始瘋狂的查,查來查去也沒個答案,倒是有幾個提問的,孤零零的在那放着,也沒人回答QAQ

哎,算了,靠天靠地不如靠自己,那就看代碼吧

看了下keep-alive,有include屬性,加上!!!

router-view標簽,父級路由那有key值,行,咱那也加!!!

反應了一下,key值???這個是個比較有意思的東西,最簡單直白的含義: 獨一無二的屬性!!!

獨一無二?那就是key值變了?想了一下,這破玩意兒有啥好變的啊,不就是等於路由path或者name嘛,這再變能變出圈啊

結果仔細一看,這key寫的值咋這么大一坨,定睛一瞧,挖草,這咋還有個時間戳里面啊!!!

難不成問題是這個時間戳?感覺是

但回頭一想,為啥要這么寫???刪了/正常寫有啥影響么,帶着疑惑,看了遍邏輯,結果發現,完全沒影響!!!

我TMD,WQTDYD,趕緊去了!!!

OK,緩存好用了

就這么簡單0.0

結論:遇到上面的問題,完全是key值實時變化導致,修改正常/去掉即可

總結:   1. 就這么個破問題,納悶了一晚上,這是哪個小可愛寫的啊,啊?可氣死我了,這個問題的出現完全是因為原代碼不是我寫的,導致一些邏輯還不清楚,改都不敢改

    2. 不要輕易否定自己,就這么個東西,以前還玩過,怎么可能寫錯呢QAQ

    3. 有些東西,百度搜不到,一般就是項目/個人的問題,而且比較奇葩...

 


免責聲明!

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



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