vue使用keepalive缓存上级页面

参考：
vue单页应用前进刷新后退不刷新方案探讨
vue，vue-router实现浏览器返回不刷新页面
vue 怎么处理当this.$router.go(-1)时，判断返回指定页面设置指定页面的keepAlive为true？
vue中 beforeRouteLeave 生命周期函数
Vue - 生命周期函数(activated)
Vue中使用keepAlive不缓存问题（已解决）
js中判断数组中是否包含某元素的方法
vue中使用keepAlive组件缓存，如何清缓存（有些时候页面不需要缓存）
另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新[最后的思路借鉴的这个]
eventBus实现兄弟，父子之间传值

初步设计

思路

给需要缓存的页面路由添加meta.keepAlive=false
在 app.vue 中用 keepalive 组件包裹 router-view
在 BlogDetail 的路由离开钩子beforeRouteLeave里面判断to.path去的是我们的缓存页面，然后设置to.meta.keepAlive=true

遇到的问题

缓存页面初次加载时没有人给它设置 keepAlive，在第一次从缓存页面跳转出去再返回时，页面才会刷新并缓存，也就是说第二次返回到缓存页面才会由保留了上级页面浏览记录的效果。

二次设计

思路

给需要缓存的页面路由添加meta.keepAlive=true，常驻缓存
在删除文章时置 isDeleted 为 true，然后在离开钩子beforeRouteLeave里判断isDeleted为true就置meta.keepAlive=false取消缓存

遇到的问题

一但有文章删除，缓存页面的meta.keepAlive就被永久置 false，无法继续提供缓存。
同时详情页编辑保存后再返回缓存的列表页，列表页不会展示更新后的文章

三次设计

思路

在常驻缓存的基础上，在meta中再添加一个变量isBack=false
然后在缓存页面的进入钩子函数beforeRouterEnter中去判断from.path从哪些页面路由过来需要做缓存，需要做缓存时把 isBack 置 true。
最后在缓存页面的activated钩子函数里判断 isBack 的值，为 true 时去调用接口更新数据，这样就可以在缓存上次浏览记录的同时更新了数据（执行到activated已经走了缓存）。在函数最后记得重新置 isBack 为 false。

遇到的问题

因为删除在详情页，查看详情和删除后的返回from都是详情页，缓存页面钩子beforeRouterEnter中无法分辨导致删除后也走了缓存，没有刷新缓存页数据。
当然这里可以使用自定义一个组件 eventBus 然后父子$emit传值的方式通知到缓存页是否删除；也可以在详情页的beforeRouteLeave中给 to 或者 from 修改某些属性作为标记（不能新增），然后在缓存页钩子中拿到标记判断是不是删除。

最终设计

思路

同样是meta.keepAlive=true常驻缓存，不再设置 isBack 去判断哪个页面返回才刷新数据，直接在缓存页面的activated中请求接口刷新数据，因为已经走到了activated，缓存了滚动进度等，刷新数据也符合业务逻辑。
然后刷新数据需要前一次访问的查询和分页参数，可以在路由 meta 中定义一个 param，在缓存页面路由离开的时候把查询和分页参数保存到 param，在返回缓存页面加载到activated的时候拿到 meta 中的 param 然后用这些参数请求接口刷新数据。

遇到的问题

有一部分跳转是用的 href 跳转，href 跳转在go(-1)返回时用的浏览器的缓存，虽然也经过了vue的各个生命周期、请求了数据接口更新了数据，但页面确实没有更新。比如我的发布文章。
后面都把 href 改成了路由跳转，完美解决。

相关的知识

钩子函数执行顺序：
不使用 keep-alive

beforeRouteEnter --> created --> mounted --> destroyed

使用 keep-alive

beforeRouteEnter --> created --> mounted --> activated --> deactivated

再次进入缓存的页面，只会触发

beforeRouteEnter -->activated --> deactivated

created和mounted不会再执行。

标签：缓存,--,keepalive,vue,meta,页面,keepAlive
来源： https://www.cnblogs.com/libaiyun/p/16462474.html