当某个列表页面进行名称分页等查询进入详情页面之后,从详情页面返回到列表页时我们想保留之前查询过得条件。这时候我们就可以使用keep-alive进行缓存。

1.首先我们需要在路由的meta内定义KeepAlive来设置需要被缓存的页面。

tips:  这里是router的静态路由写法,如果是动态路由从接口添加的路由的话可以在页面加个参数或者直接拿到返回的router数组进行递归处理,统一加 KeepAlive参数。红圈部分是需要缓存的列表,如果有多个可以写个数组进行判断。

 

 2.在页面中判断是否需要缓存

tips: 这里keep-alive有个bug 就是第二次进入缓存的页面的时候 会出现第一次缓存的数据。所以我们这里使用isRouterAlive变量,通过 isRouterAlive 控制 router-view 达到刷新效果,控制刷新keep-alive。这里使用provide,inject 来达到刷新效果。

 3.在列表页面,进行当前页面数据的缓存,进入当前页面的时候其他页面不需要缓存,所以需要使用inject: ['reload'],来进行清空条件刷新

 在列表页面进入详情页面时 需要缓存列表页的数据,所以keepalive设置为true,其他页面则进行数据刷新

 从其他页面进入列表页面时不需要缓存数据,其他页面keepalice设置为false

 5.我这里详情页面只是进行数据展示,没有添加或者修改的操作。如果详情页面有添加或者修改的操作回到列表页需要进行数据刷新时,可以使用activated周期 判断meta.keepAlive 然后调用列表接口

GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐