keep-alive失效原因及解決方案

• 問題描述
• 失效原因
• 解決方案

問題描述

keep-alive結合路由使用，需要緩存的組件，在路由配置中的meta中添加keep-alive屬性

側邊欄二級菜單列表頁使用keep-alive緩存，列表頁點擊進入詳情頁，再返回列表頁，列表頁未緩存

失效原因

列表頁和另外一個二級菜單列表頁共用一個組件，共用方式是在路由配置時component直接指向共用組件listCommon.vue, Vue的就地復用策略導致組件不更新，為了解決切換菜單時listCommon組件更新的問題，添加了watch代碼，監聽路由地址變化，手動刷新列表查詢條件和數據，從而導致keep-alive沒有實際緩存效果

解決方案

將listCommon組件作為子組件包裹在這兩個列表頁組件內，兩個列表頁路由配置的component指向各自的list1.vue和list2.vue中，這樣既避免了共用組件更新問題，也解決了keep-alive緩存失效的問題

總結

以上是生活随笔為你收集整理的keep-alive失效原因及解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。