解决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;因为接下来…

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

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;报错 加上…

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

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

检验统计量与p值笔记

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

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

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

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;也是非常非常遗憾的。 个人也是非常抱歉的。 开卷考试 简答题 第一…

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…

Python从0到100(八十三):神经网络-使用残差网络RESNET识别手写数字

前言: 零基础学Python:Python从0到100最新最全教程。 想做这件事情很久了,这次我更新了自己所写过的所有博客,汇集成了Python从0到100,共一百节课,帮助大家一个月时间里从零基础到学习Python基础语法、Python爬虫、Web开发、 计算机视觉、机器学习、神经网络以及人工智能…

docker安装和测试redis步骤

docker安装和测试redis步骤 一、官方推荐安装方式&#xff1a; 1、执行 docker pull redis:4.0.1 命令&#xff0c;下载 redis 镜像&#xff0c;如下所示&#xff1a; 2、执行命令&#xff0c;创建并启动redis容器 docker run - -rm -d - -name redis6379 -p 6379:6379 r…

微信小程序原生与 H5 交互方式

在微信小程序中&#xff0c;原生与 H5 页面&#xff08;即 WebView 页面&#xff09;之间的交互通常有以下几种方式&#xff1a; 1. 使用 postMessage 进行通信 微信小程序的 WebView 页面和原生小程序页面可以通过 postMessage 来进行数据传递。 WebView 页面向原生小程序发…

vue3学习日记5 - 项目起步

最近发现职场前端用的框架大多为vue&#xff0c;所以最近也跟着黑马程序员vue3的课程进行学习&#xff0c;以下是我的学习记录 视频网址&#xff1a; Day2-11.项目起步-静态资源引入和ErrorLen安装_哔哩哔哩_bilibili 学习日记&#xff1a; vue3学习日记1 - 环境搭建-CSDN博…

计算机组成原理--笔记一

目录 一.计算机硬件的基本组成 1.早期冯诺依曼机的结构 2.现代计算机的结构 二.各个硬件的工作原理 1.主存储器 i. 读取数据 ii. 写入数据 1.1 基本组成 2.运算器 3.控制器 一.计算机硬件的基本组成 1.早期冯诺依曼机的结构 “存储程序”&#xff0c;将指令以二进制的形式输入…

漫话架构师|什么是系统架构设计师(开篇)

~犬&#x1f4f0;余~ “我欲贱而贵&#xff0c;愚而智&#xff0c;贫而富&#xff0c;可乎&#xff1f; 曰&#xff1a;其唯学乎” 关注犬余&#xff0c;共同进步 技术从此不孤单

CV(10)--目标检测

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 目标检测 object detection&#xff0c;就是在给定的图片中精确找到物体所在位置&#xff0c;并标注出物体的类别;输出的是分类类别label物体的外框&#xff08;x, y, width, height&#xff09;。 目标检测算法&#xff1a…

【Qt】01-了解QT

踏入QT的殿堂之路 前言一、创建工程文件1.1 步骤介绍1.2 编译介绍方法1、方法2、编译成功 二、了解框架2.1 main.cpp2.2 .Pro文件2.2.1 注释需要打井号。2.2.2 F1带你进入帮助模式2.2.3 build文件 2.3 构造函数 三、编写工程3.1 main代码3.2 结果展示 四、指定父对象4.1 main代…