vue项目keepAlive保持页面状态（详情页返回列表页不刷新）

最新推荐文章于 2024-04-18 18:52:50 发布
最新推荐文章于 2024-04-18 18:52:50 发布
阅读量2.9k 收藏 7
点赞数 4
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/start_sea/article/details/121166996
版权

vue项目keepAlive保持页面状态（详情页返回列表页不刷新）

在vue项目中，存在从列表页跳转到详情页查看，而后又返回列表页的操作时，如果列表过长，我们往往希望从详情页返回列表页时，列表页能留在我们滑动的位置，即保留页面状态，通过设置vue路由的keepAlive属性可以实现。

vue中的路由跳转默认都是刷新的，默认情况下从详情页返回列表页，列表页重新初始化。
设列表页路由为’/list’，在meta中将keepAlive属性设置为true
在这里插入图片描述
keep-alive是vue中的一个抽象组件，被keep-alive包含的路由或组件将不会mounted，只在第一次进入时会初始化，之后进入需要手动刷新。
只针对列表页进行状态缓存，对路由进行区分，keepAlive属性为true时用keep-alive组件包含。

在这里插入图片描述
这样就可以实现列表页的状态缓存啦

keep-alive组件包含的组件也可以进行状态缓存，在页面中需要保存状态的组件，使用keep-alive组件包含便可。

<keep-alive>
     需要保存状态的组件...
</keep-alive>

END

如果对你有帮助，记得点赞噢（~~）

start_sea
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue页面刷新记住页面状态的实现
10-15
主要介绍了Vue页面刷新记住页面状态的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue使用keep-alive详解——实现数据缓存不刷新、修改值后刷新、相同参数区分等
qq_38143787的博客
08-01 5826
应用场景：从列表页跳转到详情页面，然后从详情页返回列表页的时候，列表页的数据不刷新，但是从其他页面进行跳转到列表页的时候，列表页的数据刷新。 简单来说，是一个前进刷新，后退不刷新的功能。 keep-alive是一个缓存的机制，keep-alive要配合router-view使用 使用方法： ...
前端Vue篇之如何保存页面的当前的状态
星辰迷上大海的博客
02-18 1042
LocalStorage/SessionStorage简单快捷，但可能会导致意外行为；路由传值适合传递特殊对象，但需要在每个跳转的组件内编写相同的逻辑；单页面渲染代码量少，但增加了维护成本；Vue的keep-alive可以缓存页面状态，提高页面切换性能和用户体验。
解决vue单页使用keep-alive页面返回不刷新的问题
12-29
使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用<keep>解决这个问题，下面是我的使用心得。 <keep>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 首先在App.vue页面上有下面一段代码，我们都知道这是页面渲染的地方 <router></router> 把这段代码改成如下： <keep> <router v-if=$route.meta.keepAlive></route
Vue 路由跳转设置不刷新
Passerby_K的博客
10-09 2201
注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。所以使用keep-alive就是保持组件活跃，不会被destroy销毁掉，就一直还活着，组件没有被销毁掉的话，组件上挂载的数据就还存在，所以状态就可以保留，所以，keep-alive就可以保持组件的状态。
vue keep-alive(1)：vue router如何保证页面回退页面不刷新
周陆军的博客，分享it技术。
04-13 2489
在构建SPA应用时，经常遇到的场景就是列表页面 跳转到详情页，但是详情页面回退到列表页面，列表页面有重新刷新了。 如何保证回退的时候不刷新页面呢？keep-alive是一个非常好的解决方案（当然你也可以以子路由，以绝对定位形势覆盖上去*_*）。 keep-alive的作用 keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 本篇主要讲keep-alive的用法。 keep-alive用法 像Tabs加载动态组件（有的童鞋直接用动态组件取代路由功能—
vue 使用keep-alive 让返回页面不重新刷新(页面缓存)(保持组件状态)
湾流~ 的博客
04-21 3514
官方说明 vue keep-alive 官方说明 示例 1.在路由配置页添加meta信息 { path: '/XXXXXXX', component: XXXXXX, meta:{ keepAlive:true //需要缓存的页面 } }, 2.在app.vue 中使用keep-alive包裹需要缓存页面的视图组件 <keep-alive> <router-view v-if="$route.meta.keepAlive" /> <
Vue (H5)跳转到新页面再返回到旧页面保持状态不变(keep-alive)
qq_66953312的博客
07-07 3451
Vue (H5)跳转到新页面再返回到旧页面保持状态不变(keep-alive)
vue3中开启了keepAlive但是页面仍然会刷新走生命周期的解决方案
个人笔记
10-10 1089
vue3中开启了keepAlive但是页面仍然会刷新走生命周期的解决方案
前端vue使用keepAlive: true,，解决页面缓存是否动态刷新的问题（可刷新可不刷新）
migexiaoliang的博客
08-30 3769
我们使用vue做项目时，，特别是搜索条件比较多的列表页时，搜索完后进入详情页，再从详情页回到列表页后数据重置，需要重新进行搜索，使用起来特别麻烦不友好。 所以比较友好的要求如下 : 1、从列表页进入详情页返回列表页时，连页数、筛选条件等都不能变，但是要列表刷新更新为最新的数据 2、列表页进数据编辑页再返回时，页数、筛选条件等都不能变，但是需要带条件刷新列表数据 3、不是详情页、编辑页进入列表页时，页数、筛选条件等都全部重置，列表数据刷新 4、列表页弹窗操作后，也需要带条件进行刷新数据...
vue中使用keep-alive缓存页面后 解决页面不刷新的问题 以及使用路由守卫后页面重复获取数据的问题
abcd123596的博客
08-31 6192
keep-alive
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
10-15
主要介绍了vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置，本文通过实例代码效果图展示给大家介绍的非常详细,需要的朋友可以参考下
vue缓存的keepalive页面刷新数据的方法
10-17
主要介绍了vue缓存的keepalive页面刷新数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 页面长时间静止不动，触发自动退出事件
weixin_45272820的博客
11-17 1287
import store from ‘@/store’ import router from ‘@/router’ import Cookies from “js-cookie”; const TokenKey = “X-Litemall-Admin-Token”; var timer = null clearInterval(timer) export function isOperateFun() { var lastTime = new Date().getTime() // 最后一次点击时间 var
Vue2 Vue3 keep-alive 使用、解决keep-alive缓存导致页面不刷新的问题
林中明月间丶
10-31 2903
<keep-alive exclude="Detail"> <router-view/> </keep-alive> activated () { if (this.lastCity !== this.city) { this.lastCity = this.city this.getHomeInfo() ...
vue项目使用keep-alive的作用
weixin_30832405的博客
02-26 173
在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了. keep-alive 简介 keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。用法也很简单：...
vue缓存页面keepAlive的坑（数据不刷新，只缓存第一次进入的页面数据），强制刷新缓存的页面的方法
weixin_41308436的博客
11-18 6369
需求：A进入B，根据不同id刷新B页面数据，B进入C，C返回B，如果C有操作数据，则返回B后刷新B数据，否则B页面不刷新； 第一次尝试 *思路是从C进入B，缓存B，其他页面进入B，不缓存 B页面： beforeRouteLeave(to, from, next) { from.meta.keeplive= false; next(); }, activated(){ //根据$route.meta }, C页面 // 返回上一页路由不刷新问题 beforeRouteLeave
vue中keepAlive的用法[返回页面不刷新]
岁末zzz的博客
06-22 1200
使用vue单页开发项目时遇到一个问题：在列表页进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用解决这个问题，下面是我的使用心得。 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 1.在app.vue页面中把替换成下图所示： <keep-alive> <router-view v-if="$route.meta.keepLive"></router-view> </keep-alive>
vue报错 ‘超出最大堆栈大小‘
最新发布
qingdouxiaohua的博客
04-18 246
在 Vue.js 中遇到 "超出最大堆栈大小"（Maximum call stack size exceeded）的错误通常意味着你的应用程序中有一个无限递归或者循环引用的情况。如果你在计算属性（computed properties）中引用了自己或其他计算属性，并且这些引用形成了一个闭环，那么这也可能导致堆栈溢出。如果你的组件之间通过事件（emit）和监听器（on）进行通信，并且这些事件和监听器形成了循环调用，那么也可能导致堆栈溢出。有时候，问题可能是由于使用了旧版本的库，而这些库在新版本中已经被修复。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值