近期入職的單位,希望頁面有緩存,想都沒想,第一反應就是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. 有些東西,百度搜不到,一般就是項目/個人的問題,而且比較奇葩...