vue3 keepalive 失效

祁祁發表於2024-03-12

好久沒更新部落格了,重複擰螺絲

keepalive之前用過,但是好久了,所以這次遇到問題覺得有點新穎

我遇到的問題是在路由裡面設定子路由,子路由的router-view設定keepalive不生效的問題

之前用了keep-alive沒有用v-slot

因為router-view就是一個單獨的元件,他的本質並不是使用url對應的元件代替他的位置,而是它的內部有一個插槽存在,當我們沒有使用這個插槽時,他會預設的插入url對應的元件,所以其實url對應的元件並不是代替他的位置,而是作為他的子元件放入了插槽中,所以keep-alive沒效果並不是因為元件太多,因為如果像動態元件一樣,根據不同情況變成不同的元件,那麼當變成元件名匹配的元件時,那麼keep-alive反倒會生效,正式因為router-view從來沒變過,所以我們包裹它不會有任何效果,而且對其內部的子元件沒有任何意義,即使我們使用include屬性,keep-alive也只是對router-view進行了快取,而其內部的子元件,依舊不會有任何反應

這其實就是在提醒我們,使用router-view中的插槽完成keep-alive包裹,router-view中的插槽是作用域插槽,其內部向外傳遞了一個物件,物件內部包括了當前url對應的route物件,和元件例項物件,透過元件例項物件,我們就可以在自己的程式碼中實現元件的渲染,然後就可以輕鬆的寫上keep-view,程式碼就如上圖了,就可以了

雖然我不懂props.Component是如何產生作用的

參考如下部落格:https://blog.csdn.net/dxh9231028/article/details/131423235

相關文章