当前位置： 首页 > news >正文

移动端使用keep-alive将页面缓存和滚动缓存具体实现方法 - 详解

news 来源：原创 2025/7/10 12:02:34

1. 配置组件名称

确保列表页组件设置了name选项，（组合式API额外配置）：

<!-- vue2写法 --> 
export default {name: 'UserList' // 必须与 <keep-alive> 的 include 匹配
}<!-- vue3写法 --> 
defineOptions({name: "UserList"
});

2. 路由配置

在路由配置中添加 meta 标识是否需要缓存：

{path: "/userList",name: "UserList",component: () => import("@/views/user/list.vue"),meta: {title: "用户列表",keepAlive: true // 自定义缓存标识}},

3. 动态缓存控制

在 App.vue 中使用 <keep-alive> 包裹路由视图，并动态判断缓存：

<!-- App.vue -->
<template><router-view v-slot="{ Component, route }"><keep-alive :include="cachedViews"><component:is="Component":key="route.fullPath"v-if="route.meta.keepAlive"/></keep-alive><component:is="Component":key="route.fullPath"v-if="!route.meta.keepAlive"/></router-view>
</template><script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute } from "vue-router";const cachedViews = ref([]);
const route = useRoute();watch(() => route.meta.keepAlive,newVal => {if (newVal && !cachedViews.value.includes(route.name)) {cachedViews.value.push(route.name);}}
);
</script>

4. 生命周期钩子

在列表页组件中使用 activated 钩子(vue3 使用 onActivated )  处理返回时的逻辑：

<div class="list_box" @scroll="handleScroll" ref="listRef"> <van-listv-model:loading="loading":finished="finished"finished-text="没有更多了"@load="getList">.......</van-list>
</div>const listRef = ref(null);
// 缓存分页和滚动位置
const cachedState = ref({page: 1,scrollTop: 0
});// 滚动事件处理
const handleScroll = e => {// 实时保存滚动位置cachedState.value.scrollTop = e.target.scrollTop;// console.log("cachedState.value.scrollTop", cachedState.value.scrollTop);
};onActivated(async () => {console.log("组件激活,执行激活时的操作", cachedState.value.page);if (cachedState.value.page > 1) {searchQuery.page = cachedState.value.page;}await nextTick();// 恢复滚动位置if (listRef.value) {listRef.value.scrollTop = cachedState.value.scrollTop;}
});onDeactivated(() => {// 保存当前状态cachedState.value.page = searchQuery.page;console.log("组件停用", cachedState.value.page);
});

6. 高级场景：条件缓存

// 在全局前置守卫中
router.beforeEach((to, from) => {if (from.name?.toString().includes('Detail') && to.name === 'UserList') {to.meta.keepAlive = true // 从详情页返回时缓存} else if (to.name === 'ListPage') {to.meta.keepAlive = false // 从其他页面进入时不缓存}
})

相关文章：

移动端使用keep-alive将页面缓存和滚动缓存具体实现方法 - 详解

1. 配置组件名称 确保列表页组件设置了name选项&#xff0c;&#xff08;组合式API额外配置&#xff09;&#xff1a; <!-- vue2写法 --> export default {name: UserList // 必须与 <keep-alive> 的 include 匹配 }<!-- vue3写法 --> defineOptions({na…...

编程日记 2025/7/10 12:02:34

工作记录9

1.点击按钮发送AJAX请求 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title&…...

编程日记 2025/7/10 10:47:39

Java 异常 SSLException: fatal alert: protocol_version 全解析与解决方案

在 Java 网络通信中&#xff0c;SSLException: fatal alert: protocol_version 是典型的 TLS/SSL 协议版本不兼容异常。本文结合 Java 官方规范、TLS 协议标准及实战经验&#xff0c;提供体系化解决方案&#xff0c;帮助开发者快速定位并解决协议版本冲突问题。 一、异常本质&…...

编程日记 2025/7/10 11:59:18

连锁美业管理系统「数据分析」的重要左右分析︳博弈美业系统疗愈系统分享

​美业管理系统中的数据分析功能在提升运营效率、优化客户体验、增强决策科学性等方面具有重要作用。 数据分析功能将美业从“经验驱动”升级为“数据驱动”&#xff0c;帮助商家在客户管理、成本控制、服务创新等环节实现精细化运营&#xff0c;最终提升盈利能力与品牌竞争力…...

编程日记 2025/7/10 11:38:56

Openharmony 和 HarmonyOS 区别？

文章目录 OpenHarmony 与 HarmonyOS 的区别&#xff1a;开源生态与商业发行版的定位差异一、定义与定位二、技术架构对比1. OpenHarmony2. HarmonyOS 三、应用场景差异四、开发主体与生态支持五、关键区别总结六、如何选择&#xff1f;未来展望 OpenHarmony 与 HarmonyOS 的区别…...

编程日记 2025/7/10 11:23:04

26.OpenCV形态学操作

OpenCV形态学操作 形态学操作&#xff08;Morphological Operations&#xff09;源自二值图像处理&#xff0c;主要用于分析和处理图像中的结构元素&#xff0c;对图像进行去噪、提取边缘、分割等预处理步骤。OpenCV库中提供了丰富的形态学函数&#xff0c;常见的包括&#xf…...

编程日记 2025/6/29 9:28:51

uniapp小程序使用echarts

1、引入插件 在Dcloud插件市场下载echarts插件&#xff1a;插件地址 2、页面使用简单示例&#xff1a; <template><view class"pie-view flex-center"><view style"width: 100%; height: 600rpx"><l-echart ref"chartRef&quo…...

编程日记 2025/7/10 11:11:27

Vue 中 使用 Mixins 解决 多页面共用相同组件的相关问题

1. 需要解决的问题 最近在vue项目中&#xff0c;有多个页面需要用到同一个组件&#xff0c;至于是什么组件&#xff0c;这里不重要&#xff0c;重要的这个组件需要被多个文件引用&#xff0c;而且有组件有一些控制逻辑。 1.1代码展示 <template><div class"ap…...

编程日记 2025/7/7 15:14:44

Rust 学习笔记：Rust 简介

Rust 学习笔记&#xff1a;Rust 简介 Rust 学习笔记&#xff1a;Rust 简介历史与发展历程核心特性优点缺点应用领域 Rust 学习笔记&#xff1a;Rust 简介 Rust 是一种系统级编程语言&#xff0c;由 Mozilla 研究院的 Graydon Hoare 于 2006 年设计&#xff0c;旨在提供内存安全…...

编程日记 2025/6/29 9:28:42

第六节：进阶特性高频题-自定义指令实现场景

示例&#xff1a;v-lazy&#xff08;图片懒加载&#xff09;、v-permission&#xff08;权限控制&#xff09; 钩子函数&#xff1a;mounted、updated、unmounted等 一、自定义指令核心机制 指令生命周期钩子 const myDirective {// 元素插入父节点时调用&#xff08;初始化…...

编程日记 2025/7/10 11:51:58

未曾设想的道路1

写在前面&#xff1a; 与其转去读博&#xff0c;倾向自学就业。 中国科学技术大学数学科学学院拥有一支优秀的师资团队&#xff0c;以下是部分教授的简介&#xff1a; 陈发来教授&#xff1a; 荣誉&#xff1a;2024年6月13日&#xff0c;在德国莱布尼茨信息科学中心召开的国际…...

编程日记 2025/7/2 18:04:22

Axure按钮设计分享：打造高效交互体验的六大按钮类型

在产品设计过程中&#xff0c;按钮作为用户与界面交互的核心元素&#xff0c;其设计质量直接影响用户体验与操作效率。Axure作为一款强大的原型设计工具&#xff0c;为设计师提供了丰富的按钮设计选项。本文将围绕基础按钮、禁用按钮、圆角按钮、动态按钮、渐变按钮和图标按钮六…...

编程日记 2025/7/10 11:28:52

MySQL 8.4企业版 安装和配置审计插件

在最新的MySQL 8.4.4企业版上启用审计日志功能 操作系统&#xff1a;Ubuntu 24.04 数据库:8.4.4-commercial for Linux on x86_64 (MySQL Enterprise Server - Commercial) 1.查看安装脚本 下面2个脚本位于mysql安装目录 share 下&#xff0c;一个是window一个是linux可以用…...

编程日记 2025/7/3 7:05:48

AI大模型学习十一：‌尝鲜ubuntu 25.04 桌面版私有化sealos cloud + devbox+minio，实战运行成功

一、说明 用了ubuntu 25.04&#xff0c;内核为GNU/Linux 6.14.0-15-generic x86_64&#xff0c;升级了部分image&#xff0c;过程曲折啊 sealos 能干啥 对集群生命周期进行管理&#xff0c;一键安装高可用 Kubernetes 集群&#xff0c;增删节点清理集群自恢复等 通过 sealos…...

编程日记 2025/7/10 11:59:20

idea无法下载源代码

通过idea找到用户设置文件路径 查看 setting.xml 文件&#xff0c;找到了以下相关的配置&#xff0c;注释掉这个maven-default-http-blocker的镜像&#xff0c;这个东西阻碍了去阿里的镜像库查找依赖&#xff0c;注释掉。 然后重启idea就能下载了...

编程日记 2025/7/10 11:46:20

【敏矽微ME32G030系列】介绍、环境搭建、工程测试

【敏矽微ME32G030系列】介绍、环境搭建、工程测试 本文介绍了敏矽微ME32G030系列单片机及开发板、包括参数特点、原理图、应用场景&#xff0c;以及开发环境搭建、工程测试等流程。 简介 本节介绍了开发板主控、特点、开发板原理图、板载资源等信息。 主控 开发板采用 ME3…...

编程日记 2025/7/1 8:56:47

Hooks的使用限制及原因

Hooks的使用限制及原因 Hooks的核心限制 只能在函数组件顶层调用 ⭐不能在条件语句、循环、嵌套函数中调用 ⭐只能在React函数组件或自定义Hooks中调用 ⭐ 为什么有这些限制&#xff1f; 根本原因&#xff1a;React依赖Hooks的调用顺序 React内部使用数组来存储每个组件的…...

编程日记 2025/7/10 10:40:09

【JavaScript】二十六、正则表达式

文章目录 1、正则表达式1.1 定义1.2 校验 2、元字符2.1 边界符2.2 量词2.3 字符类2.3.1 方括号[ ]2.3.2 小点.2.3.3 预定义 2.4 案例&#xff1a;用户名验证 3、修饰符3.1 语法3.2 案例&#xff1a;过滤敏感词 1、正则表达式 Regular Expression&#xff0c;正则表达式&#x…...

编程日记 2025/7/2 22:10:14

Geek强大的电脑卸载软件工具,免费下载

一款强大的卸载电脑软件工具,无需安装 免费下载...

编程日记 2025/7/5 9:28:36

tomcat Server 连接服务器 进展

由于机房的环境变更&#xff0c;所接触的问题也不一样&#xff01;&#xff01;&#xff01;&#xff01; 但后来出现以下提示&#xff1a; 已连接到服务器 配置错误: 部署源 springmvc:war 无效[2025-04-23 11:19:50,192] 工件 springmvc:war: 部署工件时出错。请参阅服务器日…...

编程日记 2025/7/2 16:33:52

Elasticsearch 集群节点下线方案

Elasticsearch 集群节点下线方案 在 Elasticsearch&#xff08;ES&#xff09;集群中&#xff0c;节点&#xff08;Node&#xff09;下线可能会影响数据的可用性和集群的健康状态。因此&#xff0c;正确的下线步骤需要确保数据不会丢失&#xff0c;并且不会影响查询或写入。 &…...

编程日记 2025/7/10 10:56:00

【模板匹配】图像处理（OpenCV）-part10

19.1模板匹配 模板匹配就是用模板图&#xff08;通常是一个小图&#xff09;在目标图像&#xff08;通常是一个比模板图大的图片&#xff09;中不断的滑动比较&#xff0c;通过某种比较方法来判断是否匹配成功,找到模板图所在的位置。 不会有边缘填充。 类似于卷积&#xff0c…...

编程日记 2025/7/10 10:50:33

VMware中CentOS 7虚拟机设置固定IP（NAT模式）完整教程

前言 在VMware中为CentOS 7虚拟机配置固定IP是搭建稳定服务环境的关键步骤。本文基于用户提供的最新配置文件&#xff0c;详细演示如何从DHCP自动获取IP调整为固定IP&#xff08;192.168.89.129&#xff09;&#xff0c;并提供修改前后的配置对比及操作验证。 一、当前配置状态…...

编程日记 2025/7/10 11:14:48

Ragflow、Dify、FastGPT、COZE核心差异对比与Ragflow的深度文档理解能力​​和​​全流程优化设计

一、Ragflow、Dify、FastGPT、COZE核心差异对比 以下从核心功能、目标用户、技术特性等维度对比四款工具的核心差异&#xff1a; 核心功能定位 • Ragflow&#xff1a;专注于深度文档理解的RAG引擎&#xff0c;擅长处理复杂格式&#xff08;PDF、扫描件、表格等&#xff09;的…...

编程日记 2025/7/10 10:41:02

飞帆控件：在编辑模式下额外加载的库

飞帆是一个自由的控件设计平台。在飞帆中&#xff0c;我们可以很方便地创建基于 Vue 2 组件的控件&#xff0c;并使用控件来搭建网页。 他山之石&#xff0c;可以攻玉。在创建控件中&#xff0c;使用 js 、css 依赖库能让我们的控件更强大。 有些时候&#xff0c;在编辑模式下…...

编程日记 2025/7/10 11:33:02

​​Agentic AI——当AI学会主动思考与决策，世界将如何被重塑？

一、引言&#xff1a;2025&#xff0c;Agentic AI的元年 “如果ChatGPT是AI的‘聊天时代’&#xff0c;那么2025年将开启AI的‘行动时代’。”——Global X Insights[1] 随着Agentic AI&#xff08;自主决策型人工智能&#xff09;的崛起&#xff0c;AI系统正从被动应答的“工具…...

编程日记 2025/7/10 11:12:23

68元撬动未来：明远智睿2351开发板重塑嵌入式开发生态

在嵌入式开发领域&#xff0c;价格与性能的矛盾始终存在&#xff1a;高端开发板功能强大但成本高昂&#xff0c;低价产品则往往受限于性能与扩展性。明远智睿2351开发板以68元&#xff08;含税&#xff09;的定价打破这一僵局&#xff0c;通过四核1.4G处理器、全功能Linux系统与…...

编程日记 2025/7/10 11:18:12

C# 全局 Mutex 是否需使用 `Global\` 前缀

回顾一下Mutex在Windows中的作用。Mutex是用于同步多个进程或线程的机制&#xff0c;确保同一时间只有一个实例访问资源。当创建Mutex时&#xff0c;如果命名时没有指定Global\前缀&#xff0c;默认可能是在会话内创建的&#xff0c;也就是只在当前用户会话中可见。这样的话&am…...

编程日记 2025/7/9 15:03:37

C# 中的 `lock` 关键字本质

C# 中的 lock 关键字本质上是基于 Monitor 类实现的线程同步机制&#xff0c;其核心是通过 互斥锁&#xff08;Mutex&#xff09; 确保代码块的原子性执行。以下是其实现本质的分步解析&#xff1a; 1. 语法糖的转换 当使用 lock 关键字时&#xff1a; lock (obj) {// 临界区…...

编程日记 2025/7/10 10:55:59

Java 集合：泛型、Set 集合及其实现类详解

参考资料:java入门到飞起 Java&#xff1b;泛型&#xff1b;Set 集合&#xff1b;TreeSet&#xff1b;HashSet&#xff1b;数据结构 一、引言 在 Java 编程中&#xff0c;集合框架是一个重要的组成部分&#xff0c;它提供了丰富的数据结构和算法来存储和操作数据。泛型与 Set…...

编程日记 2025/7/10 10:56:00

前端基础之《Vue（8）—内置组件》

一、Vue2.0中的内置组件 1、<slot> 插槽 2、<keep-alive> 动态组件 被keep-alive所包裹的组件&#xff1a; &#xff08;1&#xff09;不会被销毁。 &#xff08;2&#xff09;还会多两个生命周期钩子&#xff1a;activated()、deactivated()。 &#xff08;3&a…...

编程日记 2025/7/10 10:50:35

Zookeeper是什么？基于zookeeper实现分布式锁

zookeeper听的很多&#xff0c;但实际在应用开发中用的不错&#xff0c;主要是作为中间件配合使用的&#xff0c;例如&#xff1a;Kafka。 了解zk首先需要知道它的数据结构&#xff0c;可以想象为树、文件夹目录。每个节点有基本的信息&#xff0c;例如&#xff1a;创建时间、…...

编程日记 2025/7/10 10:33:11

计算机网络 第二章：应用层（四）

2.6 视频流和内容分发网 对如何在因特网中实现流行的视频流服务进行概述。它们的实现方式是使用应用层协议和以像高速缓存那样方式运行的服务器。 2.6.1 因特网视频 在流式存储视频应用中&#xff0c;基础的媒体是预先录制的视频&#xff0c;例如电影、电视节目、录制好的体育…...

编程日记 2025/7/10 10:55:06

什么是数据库的DDL和DML，有什么区别？

数据库中的 DDL 和 DML 是两类不同的 SQL 语言&#xff0c;用于不同的数据库操作目的。以下是它们的定义、区别和具体说明&#xff1a; 1. DDL&#xff08;Data Definition Language&#xff0c;数据定义语言&#xff09; 作用&#xff1a;定义或修改数据库的结构&#xff08;…...

编程日记 2025/7/10 11:10:46

HCIP实验二（OSPF网络配置与优化）

一.拓扑图与题目 1.R5为ISP&#xff0c;其上只能配置IP地址; R5与其他所有直连设备间均使用公有IP;环回地址为100.1.1.1/3 2.R4设备为企业出口路由器 3.整个0SPF环境IP基于172.16.0.0/16划分 4.所有设备均可访问R5的环回; 5.减少LSA的更新里&#xff0c;加快收敛&#xff0…...

编程日记 2025/7/9 17:32:21

第十六讲、isaaclab中使用任务空间(task-space)控制

0 前言 官方教程&#xff1a;https://isaac-sim.github.io/IsaacLab/main/source/tutorials/05_controllers/run_diff_ik.html IsaacsimIsaaclab安装&#xff1a;https://blog.csdn.net/m0_47719040/article/details/146389391?spm1001.2014.3001.5502 在之前的教程中我们利…...

编程日记 2025/7/10 10:49:34

无人船 | 图解基于PID控制的路径跟踪算法(以欠驱动无人艇Otter为例)

目录 1 PID控制的三大组成1.1 比例控制作用1.2 积分控制作用1.3 微分控制作用 2 基于欠驱动运动学的PID控制3 跟踪效果分析 1 PID控制的三大组成 PID控制律的定量表达请参考无人船 | 图解基于PID控制的路径跟踪算法(以全驱动无人艇WAMV为例)&#xff0c;本文进一步介绍PID每个…...

编程日记 2025/7/8 1:30:40

【C++】13.list的模拟实现

首先&#xff0c;我们需要把链表管理起来&#xff0c;也就是把一个个节点管理起来&#xff0c;但是每个节点的信息我们也需要管理&#xff0c;例如节点的前驱指针和后驱指针&#xff0c;以及节点的值&#xff0c;所以我们这里先封装两个类来管理节点和链表。 namespace Ro {te…...

编程日记 2025/6/29 9:53:47

Springfox + Swagger 的完整配置及同类框架对比的详细说明

以下是 Springfox Swagger 的完整配置及同类框架对比的详细说明&#xff1a; 一、Springfox Swagger 配置详解 1. 添加依赖 在 pom.xml 中添加以下依赖&#xff1a; <!-- Springfox Swagger 2 --> <dependency><groupId>io.springfox</groupId>…...

编程日记 2025/6/29 11:47:26

实现支付宝沙箱环境搭建

1.介绍 在业务开发的过程中&#xff0c;有时会涉及到一些支付相关的功能&#xff0c;这个时候就需要接入第三方支付接口&#xff0c;而由于开发中需要不断进行测试&#xff0c;使用真实的账号进行支付就有些不值得&#xff0c;所以支付宝为我们提供了第三方SDK&#xff0c;供我…...

编程日记 2025/7/10 11:41:43

element-ui transfer 组件源码分享

transfer 穿梭框组件源码简单分享&#xff0c;主要从以下几个方面&#xff1a; 1、transfer 组件页面结构。 2、transfer 组件属性。 3、transfer 组件方法。 4、transfer 组件事件。 5、transfer slot 挂载。 一、组件页面结构。 二、组件属性。 2.1 value / v-model 绑…...

编程日记 2025/7/8 4:27:35

【最新版】沃德代驾源码全开源+前端uniapp

一.系统介绍 基于ThinkPHPUniapp开发的代驾软件。系统源码全开源&#xff0c;代驾软件的主要功能包括预约代驾、在线抢单、一键定位、在线支付、车主登记和代驾司机实名登记等‌。用户可以通过小程序预约代驾服务&#xff0c;系统会估算代驾价格并推送附近代驾司机供用户选择&…...

编程日记 2025/7/7 19:09:16

【无标题】spark安装部署

Spark 4种部署模式的另外2种&#xff0c;分别是Yarn、windows模式。 二、 实验准备工作&#xff1a; 1. 三台linux虚拟机 2. spark的压缩包 三、 实验步骤 Spark-yarn 1. 解压缩文件&#xff0c;并重命名为spark-yarn。 tar zxvf spark-3.0.0-bin-hadoop3.2.tgz mv spar…...

编程日记 2025/6/29 10:03:50

【异常解决】Spring Boot 返回排序后的 Map 但前端接收顺序不对的解决方案

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

编程日记 2025/7/10 1:27:28

中兴云电脑W102D_晶晨S905X2_2+16G_mt7661无线_安卓9.0_线刷固件包

中兴云电脑W102D_晶晨S905X2_216G_mt7661无线_安卓9.0_线刷固件包 准备工作&#xff1a; 工具和设备在开始刷机之前&#xff0c;确保你已经准备好以下物品&#xff1a;双公头USB线&#xff1a;选择一根30-50厘米长的USB线&#xff0c;长度适中&#xff0c;方便操作&#xff0c;…...

编程日记 2025/7/6 10:32:38

深度学习激活函数与损失函数全解析：从Sigmoid到交叉熵的数学原理与实践应用

目录 前言一、sigmoid 及导数求导二、tanh 三、ReLU 四、Leaky Relu五、 Prelu六、Softmax七、ELU八、极大似然估计与交叉熵损失函数8.1 极大似然估计与交叉熵损失函数算法理论8.1.1 伯努利分布8.1.2 二项分布8.1.3 极大似然估计总结 前言 书接上文 PaddlePaddle线性回归详解…...

编程日记 2025/7/8 10:34:45

Kotlin中实现静态

实现“类似静态” class Util {fun action1() {}//使用companion object关键字会在类的内部创建一个伴生类&#xff0c;每个类都允许有一个伴生类//而action2作为伴生类中的方法&#xff0c;可以直接通过类名进行调用&#xff0c;实现类似“静态”的效果companion object {fun…...

编程日记 2025/7/5 18:29:45

Android 回显

//执行 private void playRunTime(String cmd) throws Exception { Process p Runtime.getRuntime().exec(cmd); InputStream is p.getInputStream(); BufferedReader reader new BufferedReader(new InputStreamReader(is)); String l…...

编程日记 2025/7/8 8:05:58

基于大模型的胃食管反流病全周期预测与诊疗方案研究

目录 一、引言 1.1 研究背景与意义 1.2 研究目的与创新点 二、胃食管反流病概述 2.1 疾病定义与分类 2.2 流行病学特征 2.3 发病机制 三、大模型技术原理与应用基础 3.1 大模型简介 3.2 适用于胃食管反流病预测的大模型类型 3.3 数据收集与预处理 四、大模型在胃食…...

编程日记 2025/7/7 18:53:07

class文件（二）

字段表集合&#xff1a; 用于描述接口或类中声明的变量 包括类级变量以及实例级变量&#xff0c;不包括方法内部声明的局部变量 字段的修饰符包括&#xff1a; 作用域&#xff1a;public、private、protected修饰符 实例还是类变量&#xff1a;static 可变性&#xff1a;fin…...

编程日记 2025/7/9 11:47:00