vue项目keepAlive保持页面状态(详情页返回列表页不刷新)
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
如果对你有帮助,记得点赞噢(~~)
vue项目keepAlive保持页面状态(详情页返回列表页不刷新)相关推荐
- vue页面详情页返回列表页_vue 详情页返回列表页,保留列表页之前的筛选条件...
需求背景 再列表页进行一系列的筛选条件之后,点击某一个进入详情页,当从详情页返回列表页的时候,需要保留之前的筛选条件. 之前的实现方法 路由跳转的时候,把筛选条件json对象放到query中去,传到详 ...
- VUE项目(单页面)问题之:从详情页返回列表页时返回到上次滚动位置,并还原列表页所有点击、搜索等状态
一.问题 新增需求,点击浏览器返回按钮或者详情页的返回按钮,需要返回列表页,并保存之前所有的状态. 二.经过 刚开始,用 this.$router.push({name: 'detailsPage', ...
- vue实现详情页返回列表页,数据不加载且页面原有位置不变
常见的需求: 列表页 ====>点击跳转到列表详情页面 ======> 返回列表页(希望页面不重新加载,且保留原来浏览的位置). 1.实现页面的不重新加载 使用vue的keep-alive ...
- vue页面详情页返回列表页_vue列表页进入详情页,返回列表项不刷新
功能 像搜索功能,在点击某项进入详情页,再回到搜索界面,如果不做特殊处理,初始化到原来的状态,在vue中可以使用keep-alive缓存搜索界面,达到数据不刷新的结果. 思路 在搜索路由对象的meta ...
- React项目,从详情页返回列表页时,保存数据并返回到原来的位置
移动端开发时会遇到在列表页点击进入详情,返回后列表页刷新的情况,对用户体验很不友好. 解决方案:使用 react-keeper 完成路由的分配,以及页面组件的缓存 react-keeper 详情参考: ...
- uniapp 小程序video列表页 解决 ios 详情页返回列表页,列表页重载问题。
安卓手机不用考虑,但是在ios系统,会出现详情返回列表,列表页会重载0 首先官方推荐video 列表不超过3个video组件,再次我们用image代替video,点击是在切换出video插件. ` / ...
- vue页面返回上一级页面不刷新,数据还在(详情页返回列表页)
1. 配置路由缓存 component: () => import('views/entrance/index')}, {path: '/seniorList',name: 'list',tit ...
- 详情页返回列表页实现定位和缓存
实现目标 浏览列表页面,点击进入详情页面,当从详情页面返回时,页面能定位到进入详情页时的位置,同时加载之前的缓存. 实现思路 当点击某个列表进入详情时,获取当前列表距离顶部的高度,并存入浏览器缓存,返 ...
- vue从其它页面返回_vue---详细页点返回列表页,停留在原先位置
列表页面,点击进入到详情页面,在详情页面向下滑动时,滚动条变化,document.documentElement.scrollTop变化,点击返回按钮时,列表页面的document.documentE ...
最新文章
- 车载以太网之权威指南_awk权威指南之 终结篇!
- 137% YOLOv3加速、10倍搜索性能提升!这样的惊喜,最新版PaddleSlim有10个
- 常考的 21 条 Linux 命令
- 迎接100G数据中心以太网
- 文本挖掘(part7)--Word2vec
- 向量表示 运动抛物线_ALevel物理知识点详解:抛物线运动
- c语言以顺序结构存储的二叉树的非递归遍历,C语言二叉树的非递归遍历实例分析...
- WebHook入门教程:快速实现自动化运维,如自动热部署、自动重启服务、自动备份数据库等等
- (十九)ArcGIS JS 加载WMS服务(超图示例)
- 刷leetcode不知道从哪里刷起?? 来看看,我把刷题题目顺序都排好了,每道题还带详细题解!
- 一文了解参数检验和非参数检验
- ABP框架----添加权限
- 统计相关系数(3)——Kendall Rank(肯德尔等级)相关系数及MATLAB实现
- Android自动背光调节机制分析
- VMware虚拟机没有网络
- 《数学之美》读后感:看数学之美,悟技术之道
- 用梅森公式求复杂电路系统传递函数
- Linux文件读取操作:read函数的使用
- IOS 应用内支付(IAP)接口使用说明
- powerpoint教程资料,PPT的