vue keep-alive 缓存问题最终解决方案

方案一问题：

页面分为： 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 会执行只有一次，activated每次都会执行 ， created 里面做 第一次 isFirstEnter = true(由于页面被缓存，所以一直生效)，之后再activated 里面做判断 只有 “不是返回回来的” 和 “第一次进来的” 就刷新数据， 并且要在下面 都设为false, 以免缓存各标识不对，在进入 “列表页” 时，通过router钩子函数 beforeRouteEnter做判断，详情页过来的设 isBack 为true,即不刷新页面