vue keep-alive 列表到详情页面保留缓存，菜单切换时不保留缓存更新列表数据

已于 2023-08-07 13:52:36 修改
阅读量1.6k 收藏 4
点赞数 1
分类专栏： vue keep-alive 文章标签： 前端
于 2023-08-04 14:02:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuying93/article/details/132100343
版权

当某个列表页面进行名称分页等查询进入详情页面之后，从详情页面返回到列表页时我们想保留之前查询过得条件。这时候我们就可以使用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 然后调用列表接口

一毛lalala
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue 详情跳转至列表页实现列表页缓存
01-19
甲爸爸提了一个需求，希望公众号内的商城能够像app一样，从商品详情页跳转至列表页及其他列表页时，可以实现列表页缓存（数据不刷新、位置固定到之前点的商品的位置） 本来想着scrollBehavior应该可以满足，但是实际操作中发现：如果列表带着分页，位置是不会定位到点击的位置的 在网上转了一圈，终于找到适合自己的方法——beforeRouteLeave 注：beforeRouteLeave只对一级页面起作用，不适用于children中的其他二级或其他级别的页面  以上是准备工作，接下来 可以步入正题了： 找到入口挂载页面：App.vue 在router-view外部包裹一个keep-alive
Vue使用keep-alive实现详情页进入列表页缓存，其他页面进入列表页不缓存
宋小羽
01-04 4930
场景：为了优化用户体验，当从商品详情页返回到商品列表页时，不需要再次请求商品列表数据。由此，我想到了使用Vue中的keep-alive，但常规keep-alive的使用方法仅满足任何条件下都缓存单个页面。 但在实际过程中，我们从其他页面（如商品分类页）进入商品列表页时，应当是请求商品列表的数据，不再缓存该页面。这里，如果使用keep-alive的常规方法则无法满足需求，所以有了以下的解决方案。 1. 配置路由出口渲染组件 在App.vue文件进行以下配置 <keep-alive> &lt.
vue使用keep-alive实现详情页进入列表页缓存，其他页面进入列表页不缓存
m0_64512327的博客
12-01 921
场景：查询列表页面输入筛选条件或者改变页码，进入详情页后返回都会刷新页面，不保留内容，所以通过对keep-alive的配置可以实现对筛选条件以及页面的保存。
vue单界面通过keep-alive解决菜单之间切换不缓存，返回缓存
⑧o年崋日常记录
11-18 2081
一、页面打开顺序 页面顺序: A菜单 A详情1 A详情2 从 A菜单 ->A详情2缓存: A 打开 详情1 详情1 打开 详情2 详情2 打开 缓存 A 缓存 详情1 缓存 详情2 详情1获取新数据 详情2获取新数据 从详情2-> A菜单 缓存: 详情2 返回 详情1 详情1 返回 A菜单 显示详情1的缓存 显示A菜单的缓存 同级菜单之间切换不缓
VUE----列表页跳转到列表详情页再返回到列表页, 页面不刷新保持原来的状态 && 跳转详情页路由缓存问题
heavenz19的博客
11-30 2989
VUE----列表页跳转到列表详情页再返回到列表页, 页面不刷新保持原来的状态 <div id="app"> <!-- 可以被缓存的视图组件 --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 不可以被缓存的视图组件 --> <ro
解决vue列表页跳转到详情页，返回列表页时不刷新、保持原来的状态的方法
k0933的博客
11-27 5053
先判断isBack的状态，如果为false,则说明当前不是从详情页进来的（可能从其他菜单或则编辑页进入，需要更新数据），就更新列表数据（自己的列表数据逻辑，并将分页设为1），之后将isBack设置为false。1、列表页进入详情页，再从详情页返回时，列表页不刷新，比如列表当前分页为第二页，点击进入详情页，再从点击返回按钮，返回到列表页时，列表页保持在第二页。2、列表页进入编辑页，再从编辑页返回时，列表页刷新。3、从其他菜单进入列表页时，列表页刷新。
Vue中路由缓存问题及解决方法
前端卷王小白的博客
08-13 5638
Vue,Vue-Router,路由缓存问题,keep-active组件,meta 字段,路由钩子函数
Vue项目引进ElementUI组件
chenxi004的博客
10-20 324
一、创建一个基于 webpack 模板的新项目 1、安装淘宝镜像 npm使用的国外中央仓库，下载速度较慢，有的时候还会有部分文件被墙掉。 npm install -g cnpm --registry=https://registry.npm.taobao.org 2、安装全局 vue-cli cnpm install --global vue-cli 3、安装 webpack cnpm ins...
Vue列表页跳转到详情页返回，页面不刷新保持原来的状态,实现刷新局部数据
w15635748705的博客
04-16 9042
这个问题我最后还是借鉴了大佬的经验，还是大佬牛 直接上教程 首先在router.js中的列表页中添加缓存的变量： { path: '/', name: 'home', // 列表页 component: home, meta: { keepAlive: true //此页面需要缓存 } 在列表详情页中添加缓冲变量（列表详情页视图不需要缓冲的话不用添加） { path: '/notedetail', name: 'noteDetail',
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
10-15
总结来说，Vue 的 `keep-alive` 结合动态的 `include` 属性和全局路由守卫，可以有效地实现列表页的缓存以及从详情页返回时的页面状态保持。这样做的好处在于，它可以提高用户在应用中的导航体验，减少了不必要的...
keep-alive不能缓存多层级路由菜单问题解决
11-21
在Vue.js应用中，`keep-alive` 是一个特殊的组件，用于缓存组件的状态，使得在切换路由后，之前的状态能够被保留下来，提高用户体验。然而，在多层级路由菜单的场景下，`keep-alive` 可能无法正常工作，尤其是在三层...
vue keep-alive 动态删除组件缓存的例子
12-13
2、在进到子页面的时候，更新store的数组，把将要缓存组件的name(注意：是组件的name，并不是路由的name)，装进数组 3、当前组件的route-view,外层包裹keep-alive，include用你从仓库里面取出来的数组 4、关闭标签...
解决vue keep-alive 数据更新的问题
12-01
然而，在实际使用中，`<keep-alive>`可能会引发一些数据更新的问题，尤其是在涉及到数据获取和组件生命周期时。本文将详细探讨这个问题，并提供解决方案。 首先，我们需要了解`<keep-alive>`的工作原理。当一个组件...
vue keep-alive 在列表页、详情页、编辑页之间的跳转
weixin_45220443的博客
09-26 484
一、解释： 列表页( list )： 比如订单列表， 可以是按时间倒序的列表、也可能是根据一些条件查询出的一页订单数据 详情页( view )： 只读的，仅仅用来查看一下详情的页面 编辑页( detail )： 可以对对象整体或者部分进行修改的页面 二、需求： 列表页( list ) 进入详情页( view )，再返回列表页( list )时，列表页( list )不能刷新，连页数、筛选条件等...
vue解决浏览器中跳转新页面缓存上一页表单等内容方法
qq_35946021的博客
06-06 5824
在工作中，有可能会遇到需要缓存页面或组件的功能。：比如在h5中有个一个50个表单，在填到第40个表单时，需要你去另一个新页面去选择列表项，然后把数据带回来。需要我们不仅把数据带回来还要保留前面已经填好的40个表单内容不被重置。此功能在微信小程序是可以做到的，微信小程序返回上一页内容的话，onshow以前的生命周期的不会调用的，所以表单是会被保留的。但是vue生命周期和微信小程序不一样。如果跳转某个页面或返回上一页都是不被缓存的。我们可以使用 keepAlive 来缓存当前页面或组件。
vue-template-admin的keep-alive缓存与移除缓存
weixin_42349568的博客
03-03 2716
A页面是表单页面，填写后需要跳转B页面。如果B页面不操作返回的话，应该能还原A页面的内容，而如果B页面点击提交，再回到A页面的时候，应该清除缓存。
vue项目实现返回不刷新、其他菜单进入刷新。keep-alive的用法
weixin_34112181的博客
02-21 1788
项目背景： 查询列表进入详情页，返回时列表页不刷新 从其他菜单页进入查询列表，列表刷新 实现 方案一：详情页通过模态窗口展示。 方案二：详情页通过跳转，使用keep-alive处理。 1.渲染组件配置 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> &lt...
vue 列表详情页返回不刷新列表
qq_41240287的博客
03-24 1068
vue 列表详情页返回不刷新列表 使用保存状态 1.在app.vue里使用keepalive 2.在需要保存状态的页面路由下写入keepAlive 3.在列表页通过路由守卫beforeRouteLeave，判断当前页面即将跳转的页面，如果是跳转详情页，就保持当前页面的keepAlive为true，来缓存列表页面，否则false，用来防止列表页返回其他页面后，再次访问列表页时数据不刷新的问题 ...
网站基本布局CSS
最新发布
m0_46608027的博客
07-24 774
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
vue keep-alive 导航栏 编辑页面 列表页请求相同ID数据 缓存数据清空
06-12
如果你在 Vue 的 `keep-alive` 组件中缓存了一个编辑页面和一个列表页面，且两个页面都需要请求相同 ID 的数据，那么你可以在编辑页面中通过 `watch` 监听 ID 的变化，然后手动清除列表页面缓存中相同 ID 的数据。 实现过程如下： 1. 在列表页面中定义 `cache` 对象，用于缓存数据。 ```javascript export default { data() { return { cache: {} } } } ``` 2. 在列表页面中，通过 `include` 属性将该组件添加到 `keep-alive` 组件中。 ```vue <template> <keep-alive include="List"> <div> ... </div> </keep-alive> </template> ``` 3. 在编辑页面中，通过 `watch` 监听 ID 的变化，并手动清除列表页面缓存中相同 ID 的数据。 ```javascript export default { data() { return { id: null } }, watch: { id(newVal, oldVal) { if (oldVal) { delete this.$parent.cache['List'][oldVal] } } } } ``` 在上面的代码中，我们通过 `watch` 监听 `id` 的变化，如果 `id` 变化了，则手动清除列表页面缓存中相同 ID 的数据。 需要注意的是，我们使用了 `this.$parent.cache` 来获取列表页面缓存对象。这是因为 `keep-alive` 组件会将被缓存的组件挂载到父组件中，所以我们需要通过 `$parent` 属性获取到父组件，然后再从父组件中获取到缓存对象。 另外，我们使用了 `delete` 操作符来删除缓存对象中的相应数据。这是因为 Vue 的响应式系统会监听对象的属性变化，如果使用 `Vue.set()` 方法重新设置属性值，则会触发更新视图的操作，而我们不希望在清除缓存时触发更新视图的操作，所以使用 `delete` 操作符来删除属性值。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值