keep-alive进入详情页缓存最终解决

3,143 阅读1分钟

1.项目需求是详情页 -其他,其他返回详情页需缓存详情页数据

从网上看了好多例子都不行,自己就尝试的做了下

2.失败例子

在app.vue使用vif来判断路由是否有缓存
在路由组件中使用路由导航守卫判断beforeRouteLeave 来判断设置需要返回缓存的页面为from.meta.keepalive为true从其他页面返回详情页确为true但是缓存不起作用

3.个人总结:缓存应该是你进去的时候页面为缓存状态true离开的时候也应该是true这样你从其他页面返回来才有缓存的页面,并且我在app.vue更换了方法为

includes方法更为简单你只需要把缓存的路由动态设置就可以了在详情页设置路由导航如下图

在vuex里面新建一个变量用来存储需要缓存的组件可以看到路由进来和出去都会缓存组件,最终效果就实现了缓存。如果有疑问欢迎大家评论留言