解决vue列表页跳转到详情页,返回列表页时不刷新、保持原来的状态的方法(二)

场景描述:

1、列表页进入详情页,再从详情页返回时,列表页不刷新,比如列表当前分页为第二页,点击进入详情页,再从点击返回按钮,返回到列表页时,列表页保持在第二页。
2、列表页进入编辑页,再从编辑页返回时,列表页刷新
3、从其他菜单进入列表页时,列表页刷新
解决方法: 结合keep-alive、activated、beforeRouteEnter解决
步骤如下:

步骤一、 给列表页的路由设置meta属性如下:

// 参观小应用
{path: '/investigate',name: 'investigate',component: () => import('../views/investigate/index.vue'),meta: {keepAlive: true,isBack: false,}
},

步骤二、 给列表页渲染位置router-view,添加keep-alive,如下

<div id="app"><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

步骤三、 列表页中设置beforeRouteEnter和activated

1. 进入列表,判断是不是从详情页进入的

进入列表时,先判断是不是从详情页进入的,如果是,则将isBack设为true

beforeRouteEnter(to, from, next) {if(from.name === 'detail') {to.meta,isBack = true;}next()
}

2. 列表激活时,判断有没有isBack,true 不刷新,false 刷新页面

先判断isBack的状态,如果为false, 则说明当前不是从详情页进来的(可能从其他菜单或则编辑页进入,需要更新数据),就更新列表数据(自己的列表数据逻辑,并将分页设为1),之后将isBack设置为false

actived () {if (!this.$route.meta.isBack) {this.paramsPage.page = 1;this.paramsPage.size = 10;this.init()}this.$route.meta.isBack = false;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/67385.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

闪豆多平台视频批量下载器

1. 视频链接获取与解析 首先&#xff0c;在哔哩哔哩网页中随意点击一个视频&#xff0c;比如你最近迷上了一个UP主的美食制作视频&#xff0c;想要下载下来慢慢学。点击视频后&#xff0c;复制视频页面的链接。复制完成后&#xff0c;不要急着关闭浏览器&#xff0c;因为接下来…

salesforce在opportunity的opportunity products页面增加一个按钮,可以批量删除products

在 Salesforce 中&#xff0c;如果想在「Opportunity > Opportunity Products」列表页面上增加一个“批量删除产品”的按钮&#xff0c;并实现勾选多条产品后统一删除&#xff0c;大体可以考虑以下几种实现思路。由于环境和版本&#xff08;Classic / Lightning&#xff09;…

卷积神经网络的底层是傅里叶变换

1 卷积神经网络的底层是傅里叶变换&#xff0c;傅里叶变换的底层是希尔伯特空间坐标变换_哔哩哔哩_bilibili 卷积神经网络的底层是傅里叶变换&#xff0c;傅里叶变换的底层是希尔伯特空间坐标变换_哔哩哔哩_bilibili从“卷积”、到“图像卷积操作”、再到“卷积神经网络”&…

攻防世界_SQL注入

inget 尝试万能钥匙。 输入?id1or11# supersqli 1.找注入点 输入框 2.判断字符型&#xff0c;数字型 输入1 and 11 和1 and 12&#xff0c;发现两次提交后页面一样&#xff0c;判断出为字符型注入 3.判断闭合符号 输入1&#xff0c;回显正常 输入1&#xff0c;报错 加上…

idea 如何安装 github copilot

idea 如何安装 github copilot 要在 IntelliJ IDEA 中安装 GitHub Copilot&#xff0c;可以按照以下步骤操作&#xff1a; 打开 IntelliJ IDEA: 启动 IntelliJ IDEA。 打开插件管理器: 点击菜单栏中的 File。 选择 Settings&#xff08;Windows/Linux&#xff09;或 Prefere…

怎么把文章发表到网上?在平台上投稿文章会有哪些常见问题?

怎么把文章发表到网上&#xff1f;在发表文章的过程中&#xff0c;我们可能会碰到各种各样的问题。这些问题要么导致发表时间被拖长&#xff0c;要么可能导致文章被拒稿。 就让我们来了解下文章发表过程中需要注意的一些细节&#xff0c;知晓怎么顺利地把文章发表到网上。 一、…

检验统计量与p值笔记

一、背景 以雨量数据为例&#xff0c;当获得一个站点一年的日雨量数据后&#xff0c;我们需要估计该站点的雨量的概率分布情况&#xff0c;因此我们利用有参估计的方式如极大似然法估计得到了假定该随机变量服从某一分布的参数&#xff0c;从而得到该站点的概率密度函数&#x…

【Flink系列】6. Flink中的时间和窗口

6. Flink中的时间和窗口 在批处理统计中&#xff0c;我们可以等待一批数据都到齐后&#xff0c;统一处理。但是在实时处理统计中&#xff0c;我们是来一条就得处理一条&#xff0c;那么我们怎么统计最近一段时间内的数据呢&#xff1f;引入“窗口”。 所谓的“窗口”&#xff…

主链和Layer2之间资产转移

主链和Layer2之间资产转移 主链和Layer2之间资产转移是实现Layer2技术的关键环节,以下是资产转移的流程、流行解决方案及原理: 资产从主链转移到Layer2 用户在主链上发起一笔交易,将资产发送到一个特定的智能合约地址,这个合约是主链与Layer2之间的桥梁。智能合约会锁定用…

mybatis xml sql

1. mybatis根据某一个字段根据以及集合中的列表进行模糊匹配 mapper List<Message> selectByLinkList(Param("userId") String userId, Param("messageName") String messageName, Param("anJinGoodsNameList") List<String> anJi…

C#轻松实现条形码二维码生成及识别

一、前言 大家好&#xff01;我是付工。 今天给大家分享一下&#xff0c;如何基于C#来生成并识别条形码或者二维码。 二、ZXing.Net 实现二维码生成的库有很多&#xff0c;我们这里采用的是http://ZXing.Net。 ZXing是一个开放源码的&#xff0c;用Java实现的多种格式的一…

OpenCV实现Kuwahara滤波

Kuwahara滤波是一种非线性的平滑滤波技术&#xff0c;其基本原理在于通过计算图像模板中邻域内的均值和方差&#xff0c;选择图像灰度值较为均匀的区域的均值来替代模板中心像素的灰度值。以下是Kuwahara滤波的详细原理说明&#xff1a; 一、基本思想 Kuwahara滤波的基本思想…

24-25-1-单片机开卷部分习题和评分标准

依据相关规定试卷必须按评分标准进行批改。 给分一定是宽松的&#xff0c;能给分一定给&#xff0c;如有疑问也可以向学院教务办申请查卷。 一部分学生期末成绩由于紧张或其他原因导致分数过低&#xff0c;也是非常非常遗憾的。 个人也是非常抱歉的。 开卷考试 简答题 第一…

使用opencv.js 的时候报错 Uncaught 1022911432

需求&#xff1a; -如题 进程&#xff1a; 这个报错是opencv 内存溢出了可以在开始的时候分配更多的内存cv.setMemoryManagement(1024 * 1024 * 50)OpenCV.js 中&#xff0c;很多对象&#xff08;如 Mat&#xff09;需要手动释放。如果你频繁创建矩阵或图像对象而不释放&…

Android SystemUI——服务启动流程(二)

在 Andorid 系统源码中,package/apps下放的是系统内置的一些 APP,例如 Settings、Camera、Phone、Message 等等。而在 framework/base/package 下,它们也是系统的 APP,SystemUI 就在此目录下。它控制着整个 Android 系统的界面,但其实他也是一个 APP,不同于一般的 APP,它…

AI学习之自然语言处理(NLP)

自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是计算机科学、人工智能和语言学领域的交叉学科&#xff0c;旨在让计算机能够理解、处理和生成人类语言。以下为你详细介绍&#xff1a; 自然语言处理的关键技术 词法分析&#xff1a;将文本…

linux之进程信号(初识信号,信号的产生)

目录 引入一、初识信号(信号预备知识)1.生活中的信号2.Linux中的信号3.信号进程得出的初步结论 二、信号的产生1.通过终端输入产生信号拓展: 硬件中断2.调用系统函数向进程发信号3.硬件异常产生信号4.软件条件产生信号拓展: 核心转储技术总结一下&#xff1a; 引入 一、初识信…

【工具类】获取日出日落时间的Java工具类

博主介绍&#xff1a;✌全网粉丝22W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…

Open FPV VTX开源之betaflight配置

Open FPV VTX开源之betaflight配置 1. 源由2. 配置3. 总结4. 参考资料5. 补充 - 飞控固件版本 1. 源由 飞控嵌入式OSD - ardupilot配置使用betaflight配套OSD图片。 Choose correct font depending on Flight Controller SW. ──> /usr/share/fonts/├──> font_btfl…

(双系统)Ubuntu+Windows解决grub引导问题和启动黑屏问题

Introduction ‍ 解决双系统的 Windows 的启动项失踪和grub正常的情况下启动 Windows 系统出现黑屏的问题。 ‍ Note: ‍ 我的系统是 Ubuntu 24.04 LTS desktop​&#xff0c;安装了双系统&#xff08;先安装 Win &#xff0c;再安装 Ubuntu&#xff09; ‍ 文章目录 In…