vue使用keep-alive缓存指定页面

最新推荐文章于 2024-06-22 23:03:43 发布
最新推荐文章于 2024-06-22 23:03:43 发布
阅读量1.5k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44759404/article/details/102517823
版权

需求: 从下单页进入购买协议,从购买协议返回需保存用户输入的姓名等信息,
1.之前直接使用keep-alive 会导致这个下单页一直保存, 哪怕从产品详情页进入下单页 也是的,
解决方案: 使用keep-alive的include属性选择性保存,结合vuex,直接上代码, 简单修改即可使用

1.此vuex中保存需要保存的页面值
2include的值是一个数组,数组里的值为页面的name值,有就保存,没有就不保存
3.在产品详情页准备去下单页的时候保存下单页面的name值,注意此name值是页面的name属性值,不是route的name值
在这里插入图片描述
4.在下单页监听路由,要去的购买协议页面就添加name值到vuex中缓存页面,不需要返回保存的即将vuex中的值改为空数组即可在这里插入图片描述
5.缓存后 如果要请求数据 是需要在 activated周期函数中写的 created里的在返回回来后是不会调用的

weixin_44759404
关注
vue keep-alive 动态删除组件缓存的例子
10-16
接下来，我们要讲解如何在Vue项目中动态地删除keep-alive缓存的组件。在实际开发中，我们常常会遇到这样的业务场景：当用户切换不同的标签页（tab页）时，希望保持当前标签页组件的状态，以便在切换回来时能够恢复...
vue keepAlive 缓存指定页面
lk2913128603的博客
03-08 1149
vue 利用 keepAlive 达到 a页面进入b页面缓存，但是进入c页面不会缓存该a页面
Vue2组件的生命周期及缓存路由（keep-alive）
qq_60654563的博客
04-18 1532
Vue2组件的生命周期
keep-alive实现页面缓存
最新发布
宝码香车的博客
06-22 147
keep-alive实现页面缓存。
VUE工程的keep-alive缓存机制（全部缓存、部分缓存、定向缓存）
happy81997的博客
12-02 3126
目录 应用场景 解决思路 一、缓存所有页面 二、缓存部分页面 三、页面缓存了，有的功能需要再进入后，仍然重新执行的怎么办 四、执行前进刷新，后退时候缓存 五、页面B进入页面A需要缓存，页面C进入页面A不需要缓存 应用场景 1、vue工程，很多时候希望页面不管怎么跳转，返回时候，页面都能保持之前的操作状态， 2、页面跳转不用每次都执行mounted，特别很多请求数据时...
【Vue】 keep_alive缓存部分页面返回不刷新
weixin_43023873的博客
09-10 483
1.缓存页面使用场景（点击跳转路由到详情页面，后返回入口页希望数据保持） 2.使用keep-alive 3.首先在app.vue文件中修改 <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-v...
Vue3 除了 keep-alive，还有哪些页面缓存的实现方案
zz_jesse的博客
09-07 329
作者：香芋好好吃https://juejin.cn/post/7153140300817367054引言有这么一个需求：列表页进入详情页后，切换回列表页，需要对列表页进行缓存，如果从首页进入列表页，就要重新加载列表页。对于这个需求，我的第一个想法就是使用keep-alive来缓存列表页，列表和详情页切换时，列表页会被缓存；从首页进入列表页时，就重置列表页数据并重新获取新数据来达到列表页重新加载的效...
基于vue中keep-alive缓存问题的解决方法
01-19
但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id ...
vue里如何主动销毁keep-alive缓存的组件
10-17
本文将详细介绍如何在Vue项目中，特别是在使用了`keep-alive`组件缓存的情况下，主动销毁那些被缓存的组件。 背景介绍 在后台管理系统中，使用标签页切换是一种常见的用户交互方式。为了提升用户体验，当用户切换...
vue中keep-alive内置组件缓存的实例代码
01-19
将要缓存的组件使用 keep-alive 包裹住即可。 keep-alive优点的介绍： 1. 切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。 2. 切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的...
vue使用keep-alive保持滚动条位置的实现方法
10-17
然而，当我们使用Vue内置的<keep-alive>组件来缓存组件状态时，会发现滚动条位置并没有被自动保存。为了解决这个问题，我们需要通过一些编程技巧来手动实现滚动条位置的保存与恢复。 首先，要实现滚动条位置的保持...
「Vue」keep-alive 界面保持+界面缓存清除
Emperor_huanzi 的博客
07-20 635
项目需求 Vue项目 列表数据跳转到详情界面，从详情界面返回时列表数据保持，从其他地方进入列表时，列表会重新渲染 具体修改 在路由文件中选择你将要保活的页面 – 例如（在meta中加入keepAlive:true） { path: '/redeemlist', component: redeemlist, name: 'redeemlist', meta: { title: '', keepAlive: true, } 修改ro
【vue】keep-alive的用法及详解
weixin_45291798的博客
10-12 2801
只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，包含在 keep-alive 中，但符合 exclude ，不会调用activated和 deactivated这两个函数钩子！keep-alive组件，只要将子组件嵌套在这里面就可以实现组件的缓存，当页面返回时数据不会丢失，实现了我们常见的历史页面不刷新的效果。keep-alive组件是vue2.0提供的一个缓存组件，在组件切换过程中把切换出去的组件保留在。
vue keep-alive 在列表页、详情页、编辑页之间的跳转
QQ2856639881的专栏
03-10 2327
https://www.cnblogs.com/growupup/p/10001623.html 一、解释： 列表页( list )： 比如订单列表， 可以是按时间倒序的列表、也可能是根据一些条件查询出的一页订单数据 详情页( view )： 只读的，仅仅用来查看一下详情的页面 编辑页( detail )： 可以对对象整体或者部分进行修改的页面 二、需求： 1. 列表页(...
Vue组件keepAlive实现返回上一页保存原数据
米拉
07-29 5024
在页面中输入搜索条件跳转到详情页，从详情页返回要保留原页面输入的搜索条件及搜索的结果。效果如下： 这里用到了vue的内部组件keepAlive router.js 注：列表页需要缓存 keepAlive: true，详情页不需要缓存 keepAlive: false routes: [ { path: '/', name: 'index', //component: Home component: () => import('..
vue单界面通过keep-alive解决菜单之间切换不缓存，返回缓存
⑧o年崋日常记录
11-18 2124
一、页面打开顺序 页面顺序: 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中 keep-alive 详解
热门推荐
明天也要努力的博客
01-13 6万+
1. 简介 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用： 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。 原理： 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode
vue使用keep-alive缓存页面优化项目
田兴的博客
03-01 6293
keep-alive是什么？ <keep-alive> 标签：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，取消组件的销毁函数，防止重复渲染DOM。 当用它包裹 <router-view> 时，会缓存不活动的组件实例，而不是销毁它们。 和 <transition> 相似，它自身不会渲染一个 DOM 元素。 使用 <keep-alive>...
vue使用keep-alive缓存列表页
09-03
- *2* *3* [vue使用keep-alive缓存列表页](https://blog.csdn.net/weixin_51435431/article/details/126483952)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值