方案一問題:
頁面分為: A 主頁? B列表頁? C 詳情頁
A? beforeRouteLeave 時設置 to.meta.keepAlive = false (A 進入 B頁面時)背苦, 不緩存 B列表頁
B beforeRouteLeave 時 (B -> C)列表頁進詳情頁時 from.meta.keepAlive =true 緩存B列表頁
C詳情頁 返回 B列表頁 ,此時B列表頁緩存不生效肾档,也就是第一次不生效
總結問題原因:
當進入B列表頁后守呜,keepAlive 為 true 時刻盐,緩存生效
當離開B列表頁時 設置 keepAlive 為 true? 時 诸尽,緩存不生效
方案二問題:
頁面分為: A 主頁? B列表頁? C 詳情頁
A 主頁? beforeRouteLeave 時椎例,設置(即A 主頁 進入B列表頁時設B頁面緩存) to.meta.keepAlive = true,
B 列表頁? beforeRouteLeave 時挨决,設置(即 B列表頁 返回 A主頁 時) from.meta.keepAlive = false
再次 A 進入 B 時, B 是緩存的效果脖祈,這是不對的
問題點: 頁面還是會被緩存了,離開B頁面時 設置的當前 from.meta.keepAlive = false 無效
方案三最終的解決方案:
默認列表頁就 設 keepAlive true? 便可
緩存的頁面 created 會執(zhí)行只有一次,activated每次都會執(zhí)行 眼虱, created 里面做 第一次 isFirstEnter = true(由于頁面被緩存,所以一直生效)捏悬,之后再activated 里面做判斷 只有 “不是返回回來的” 和 “第一次進來的” 就刷新數據, 并且要在下面 都設為false, 以免緩存各標識不對甥厦,在進入 “列表頁” 時,通過router鉤子函數 beforeRouteEnter做判斷刀疙,詳情頁過來的設 isBack 為true,即不刷新頁面