方案一问题：
页面分为： 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,即不刷新页面
网友评论