vue实现详情页返回列表页,数据不加载且页面原有位置不变
常见的需求:
列表页 ====>点击跳转到列表详情页面 ======> 返回列表页(希望页面不重新加载,且保留原来浏览的位置)。
1.实现页面的不重新加载
使用vue的keep-alive
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,也就是所谓的第一次进入页面加载,返回等第二次进入页面不加载
app.vue:
<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view>
router-view表示的是引用的页面(也可以是组件我们这里指的是页面),$route.meta.keepAlive
表示的是当前页面的meta
的keepAlive
属性是否为true,只有该属性为true时,我们才采用keep-alive
的形式
可以直接在router.js中设置meta
这里是简化版:
{path: '/detail',component: detail},{path: '/list',component: list,// 设置metameta: {keepAlive: true}},
返回
最好使用
this.$router.back()
2.实现页面返回原来的位置
详情页
注意beforeRouteEnter表示的是router页面进入前,所以上下文不能用this,可以说采用箭头函数+vm的形式
this.$refs.medicalListContainer表示的是滚动的盒子,你可以换成window等你要滚动的盒子
next()表示的是页面继续运行,是不可缺少的。
// router跳转离开前,记录当前页面的位置beforeRouteLeave(to, from, next) {this.scroll = this.$refs.medicalListContainer.scrollTop;next()},// 页面进入前beforeRouteEnter(to, from, next) {next(vm => {vm.$refs.medicalListContainer.scrollTop = vm.scroll;})}
3.如果希望页面不加载数据但是列表某项内容变化
比如音乐列表,点击列表项进去详情页面,在详情页面点击播放,返回列表页,页面不刷新,保留原来的位置,但是某项的音乐符号变为播放
list页面:
div class="list-item" v-for="(item, index) in list" :key="index"><div class="list-item-left"><span :class="{'active-text': item.id == playingId && playerStatus">{{item.title | subTitle(15)}}</span></div>
detail页面
我们需要存储detail页面的播放状态,和代表的list项id
window.localStorage.setItem('audioId', this.playingId);window.localStorage.setItem('audioPlayStatus', this.audioPlayStatus);
如果你使用的是在app内嵌入H5的方式,而你又是在页面返回前存储的话,我们没有办法项点击H5按钮返回一样捕捉用户的点击动作,先存储在使用this.$router.back()
返回,但是可以使用beforeDestroy,在页面被销毁前处理
beforeDestroy() {window.localStorage.setItem('audioId', this.playingId);window.localStorage.setItem('audioPlayStatus', this.audioPlayStatus);}
在list页面
拿到需要的参数,这样页面就会自然变化
// 页面进入前beforeRouteEnter(to, from, next) {// 如果页面来自详情页,返回原来的列表页位置,且动态变化播放状态if (from.path == '/detail') {next(vm => {vm.playingId = window.localStorage.getItem('audioId');if (vm.playingId) {// audioPlayStatus: 1 -- 播放 0 -- 暂停 (string 类型)vm.playerStatus = window.localStorage.getItem('audioPlayStatus')}})} else {next();}}
4. 处理初次加载和返回列表不刷新,却都要处理的函数
activated被 keep-alive 缓存的组件激活时调用。(如果没有被keep-alive可以直接写在created中)
比如在webview(app内嵌套H5页面)内,我们在页面都要与原生交互,监听原生的反馈。
// activated可以保证keep-alive情况下,页面不刷新,但是会运行activated方法activated() {// 监听暂停或继续播放window.playPause = function(status) {if (status == "pause") {this.playerStatus = 1;} else {this.playerStatus = 2;}}.bind(this);},
vue实现详情页返回列表页,数据不加载且页面原有位置不变相关推荐
- vue页面详情页返回列表页_vue 详情页返回列表页,保留列表页之前的筛选条件...
需求背景 再列表页进行一系列的筛选条件之后,点击某一个进入详情页,当从详情页返回列表页的时候,需要保留之前的筛选条件. 之前的实现方法 路由跳转的时候,把筛选条件json对象放到query中去,传到详 ...
- vue项目keepAlive保持页面状态(详情页返回列表页不刷新)
vue项目keepAlive保持页面状态(详情页返回列表页不刷新) 在vue项目中,存在从列表页跳转到详情页查看,而后又返回列表页的操作时,如果列表过长,我们往往希望从详情页返回列表页时,列表页能留在 ...
- VUE项目(单页面)问题之:从详情页返回列表页时返回到上次滚动位置,并还原列表页所有点击、搜索等状态
一.问题 新增需求,点击浏览器返回按钮或者详情页的返回按钮,需要返回列表页,并保存之前所有的状态. 二.经过 刚开始,用 this.$router.push({name: 'detailsPage', ...
- 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 ...
最新文章
- linux安装8168网卡,Fedora 配置 RTL8168/8111 网卡 Linux下 RTL8168/8111 网卡配置
- python turtle循环图案-Python内置模块turtle绘图详解
- Lightoj 1231 - Coin Change (I) (裸裸的多重背包)
- String StringBuilder StringBuffer 对比 总结得非常好
- java堆栈句柄,深入了解JVM—内存区域
- LeetCode 105. Construct Binary Tree from Preorder and Inorder Traversal 由前序和中序遍历建立二叉树 C++...
- 面试之 Python 进阶
- textview字体切换颜色_百元耳机支持主从切换,关键双耳双麦还能立体降噪
- Python赋值语句浅析
- linux好用的下载工具,四款linux下的好工具
- InstallShield 2015 Limited Edition 打包教程
- Atitit 软件开发中 瓦哈比派的核心含义以及修行方法以及对我们生活与工作中的指导意义...
- 数据分析-美国小孩英文名分析-可视化(含代码)
- 临床血液学综合练习题库【2】
- ESP8266天猫精灵接入流程
- 如何存储10亿的数据
- c语言tab什么意思_C语言入门学好这一篇就足够了!C语言所有的知识点
- django集成Sphinx,为项目自动生成文档
- 机器学习模型——回归模型
- 深度学习_目标检测_SPP(Spatial Pyramid Pooling)详解