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

keep-alive多级页面缓存实现

文章目录

    • keep-alive多级页面缓存实现
        • 只适用于页面是否缓存状态不变的情况
        • 对于上面的问题提供一种解决方案

keep-alive多级页面缓存实现

只适用于页面是否缓存状态不变的情况

网上有一种很普遍的教程,不使用keep-aliveinclude属性,而是通过在路由表中添加meta: { keepAlive: true},通过v-if判断是否使用keep-alive

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

这种写法只适用于页面是否缓存的状态不变的情况

现实中遇到的场景是,有三个页面(总览页、列表页、详情页),三个页面逐级跳转(总览页 -> 列表页 -> 详情页)。因为列表页是分页懒加载的,用户希望可以从详情页返回时可以直接定位到之前的位置

因此要实现的实际上为页面缓存+记录滚动条位置,这里先看页面缓存

网上很多教程的写法是,在列表页使用beforeRouteLeave,动态设置keepAlive的值

// 列表页
beforeRouteLeave(to, from, next) {if (to.name === "详情页") {from.meta.keepAlive = true; } else {from.meta.keepAlive = false;this.$destroy();}next();
},

乍一看没什么问题,到详情页的时候将keepAlive设为true进行缓存,返回到总览页的时候设置为false取消缓存,但仔细想一下,这样写是晚一步的,是否缓存在刚进入页面时就定下来了,在beforeRouteLeave的时候修改keepAlive,相当于修改的是下次进入页面时是否缓存

实际流程会变为

理想状态下
总览页		此时列表页路由的keepAlive默认为true	点击进入列表页
列表页		点击进入详情页		此时会缓存列表页,keepAlive仍为true
详情页		返回列表页	 获取缓存
这部分流程没有问题,接下来
列表页		返回总览页 	列表页被销毁,keepAlive变为false
总览页		点击进入列表页 	列表页keepAlive为false
这次列表页将不会被缓存,此时已经出现问题

那我们是不是可以不设置from.meta.keepAlive = false;,只在返回时销毁keep-alive的缓存,此时又出现了一个新的问题,在使用this.$destroy();销毁组件后会导致缓存异常(回退时不使用缓存的列表页,而是创建了个新的,并且会一直缓存)。详情可以百度this.$destroy()导致keep-alive缓存异常

Reference:vue-router时 keep-alive 页面缓存问题解决 - 知乎

调用$destroy后,组件生命周期出现异常。 · Issue #6961 · vuejs/vue · GitHub

所以要实现类似功能,就使用include和exclude,很多帖子纯纯的坑

对于上面的问题提供一种解决方案

还是对需要缓存的路由添加meta: { keepAlive: true}

维护一个页面栈,将访问过的页面添加进去,如果当前进入的页面在之前访问过,代表是回退操作,则将页面栈中在本页面之后的数据删除,使用include记得要给组件添加name

<template><div id="app"><keep-alive :include="cachePageList"><router-view></router-view></keep-alive></div>
</template>
<script>export default {data(){return {pageRouteList: [] // 访问过的页面栈}},computed: {cachePageList(){// 缓存只取页面栈中router设置了keepAlive的return this.pageRouteList.filter(route => route.meta.keepAlive).map(route => route.name)}},watch: {$route(to, from) {const index = this.pageRouteList.findIndex(route => route.fullPath === to.fullPath)const isVisited = index !== -1if (!isVisited) {this.pageRouteList.push(to)} else {this.pageRouteList.splice(index + 1)}}}}
</script>

相关文章:

keep-alive多级页面缓存实现

文章目录 keep-alive多级页面缓存实现只适用于页面是否缓存状态不变的情况对于上面的问题提供一种解决方案 keep-alive多级页面缓存实现 只适用于页面是否缓存状态不变的情况 网上有一种很普遍的教程&#xff0c;不使用keep-alive的include属性&#xff0c;而是通过在路由表中…...

ks 小程序sig3

前言 搞了app版的快手之后 &#xff08;被风控麻了&#xff09; 于是试下vx小程序版的 抓包调试 小程序抓包问题 网上很多教程&#xff0c; github也有开源的工具代码 自行搜索 因为我们需要调试代码&#xff0c;所以就用了下开源的工具 &#xff08;可以用chrome的F12功能&a…...

图论之构造完全图

题目 2398: 信息学奥赛一本通T1489-构造完全图 时间限制: 2s 内存限制: 192MB 提交: 16 解决: 9 题目描述 对于完全图 G&#xff0c;若有且仅有一棵最小生成树为 T&#xff0c;则称完全图 G 是树 T 扩展出的。 给你一棵树 T&#xff0c;找出 T 能扩展出的边权和最小的完全图 G…...

RDD触发算子:一些常用的触发算子(count、foreach、saveAsTextFile、first)

文章目录 1、count算子功能语法 2、foreach算子功能语法 3、saveAsTextFile算子功能语法 4、first算子功能语法举例 1、count算子 功能 统计RDD集合中元素的个数&#xff0c;返回一个int值 语法 def count(self) -> int2、foreach算子 功能 对RDD中每个元素调用一次参数中…...

搭建RAGFlow

RAGFlow 是一款基于深度文档理解构建的开源 RAG&#xff08;Retrieval-Augmented Generation&#xff09;引擎。RAGFlow 可以为各种规模的企业及个人提供一套精简的 RAG 工作流程&#xff0c;结合大语言模型&#xff08;LLM&#xff09;针对用户各类不同的复杂格式数据提供可靠…...

css中的box-sizing,记录

border-box&#xff1a;最终高度为height&#xff0c;默认包含padding border等属性 content-box&#xff1a;box-sizing默认值&#xff0c;最终大小为heightpaddingborder 等...

使用useCallback引发对闭包的理解

一、先简单介绍一下闭包: 闭包是 JavaScript 中的重要概念&#xff0c;它指的是一个函数可以“记住”并访问其词法作用域&#xff0c;即使在这个函数的外部被执行。简单来说&#xff0c;闭包是由函数及其相关的环境组合而成的。 闭包的特性 函数内部可以访问外部变量: 闭包…...

gvim添加至右键、永久修改配置、放大缩小快捷键、ctrl + c ctrl +v 直接复制粘贴、右键和还原以前版本(V)冲突

一、将 vim 添加至右键 进入安装目录找到 vim91\install.exe 管理员权限执行 Install will do for you:1 Install .bat files to use Vim at the command line:2 Overwrite C:\Windows\vim.bat3 Overwrite C:\Windows\gvim.bat4 Overwrite C:\Windows\evim.bat…...

腾讯云-COS

COS 对象存储 是一种可扩展的云端数据存储服务。它适用于存储任意类型的文件&#xff0c;并且可以针对这些文件进行访问控制。 CORS 跨域资源共享 是一种机制&#xff0c;它使用额外的HTTP头来告诉浏览器允许一个域上的Web应用请求另一个域上的资源。当需要从一个域名下的网页向…...

蓝桥杯每日真题 - 第16天

题目&#xff1a;&#xff08;卡牌&#xff09; 题目描述&#xff08;13届 C&C B组C题&#xff09; 解题思路&#xff1a; 题目分析&#xff1a; 有 n 种卡牌&#xff0c;每种卡牌的现有数量为 a[i]&#xff0c;所需的最大数量为 b[i]&#xff0c;还有 m 张空白卡牌。 每…...

基因组之全局互作热图可视化

引言 PlotHiC 是一个专为 Hi-C 数据可视化分析而设计的 Python 包。Hi-C 技术是一种能够检测染色体三维结构的实验方法&#xff0c;它能揭示 DNA 在细胞核内的三维组织结构。为了更好地展示和解释这些复杂的数据&#xff0c;PlotHiC[1] 可以帮助用户方便地绘制Hi-C 数据的热图。…...

基于Lora通讯加STM32空气质量检测WIFI通讯

目录 目录 前言 一、本设计主要实现哪些很“开门”功能&#xff1f; 二、电路设计原理图 1.电路图采用Altium Designer进行设计&#xff1a; 2.实物展示图片 三、程序源代码设计 四、获取资料内容 前言 随着环境污染问题的日益严重&#xff0c;空气质量的监测与管理已经…...

STM32 极速入门第一天基础拓展 驱动i2c屏幕 ( 使用PlatformIO开发STM32单片机 )

输入输出模式解析 输出模式 在输出模式下&#xff0c;通常不需要设置上下拉电阻. 输出电平由 LL_GPIO_SetOutputPin 和 LL_GPIO_ResetOutputPin 函数直 接控制。 输入模式 在输入模式下&#xff0c;设置上下拉电阻是非常重要的. 输入引脚悬空时可能会导致不确定的电平&#xf…...

【WPF】Prism学习(五)

Prism Commands 1.错误处理&#xff08;Error Handling&#xff09; Prism 9 为所有的命令&#xff08;包含AsyncDelegateCommand&#xff09;提供了更好的错误处理。 避免用try/catch包装每一个方法根据不同遇到的异常类型来提供特定的逻辑处理可以在多个命令之间共享错误处…...

RabbitMQ的基本概念和入门

RabbitMQ 的基本概念和入门 RabbitMQ 是一款流行的开源消息队列中间件&#xff0c;实现了高级消息队列协议&#xff08;AMQP&#xff09;。它使用Erlang语言编写&#xff0c;具备高可用性、可扩展性和易用性等特点&#xff0c;广泛应用于各种分布式系统中。本文将详细介绍Rabb…...

Shell脚本6 -- 条件判断if

声明&#xff1a; 本文的学习内容来源于B站up主“泷羽sec”视频【shell编程&#xff08;4&#xff09;脚本与用户交互以及if条件判断】的公开分享&#xff0c;所有内容仅限于网络安全技术的交流学习&#xff0c;不涉及任何侵犯版权或其他侵权意图。如有任何侵权问题&#xff0c…...

经验笔记:从生成 SSH 密钥到成功连接测试(以Gitee为例)

从生成 SSH 密钥到成功连接测试的经验笔记&#xff08;以Gitee为例&#xff09; 1. 生成 SSH 密钥对 选择合适的加密算法 ED25519&#xff1a; 密钥长度&#xff1a;私钥 256 位&#xff08;32 字节&#xff09;&#xff0c;公钥 256 位&#xff08;32 字节&#xff09;&#…...

Object.defineProperty和响应式

Object.defineProperty()是一个监听对象属性变化的方法。一般情况下我们是不会直接使用的&#xff0c;或者说我们遇到的场景还没有这么高级。 最有名的例子就是Vue2的响应式实现&#xff0c;就是通过这个方法来实现的。 用起来不难&#xff0c;就是个API&#xff0c;只是用的…...

前端web

题目&#xff1a;制作带有下拉悬停菜单的导航栏 效果图 一、先制作菜单栏 <body> <div id"menu"> <div id"container"> <div class"item">游戏1 <div cla…...

DDNet 服务器配置教程 Linux 环境

DDNet 服务器配置教程 Linux 环境 配置之前可以参考一下官方网址给出的内容 官方网址&#xff1a;DDNet官方 环境说明 OS: Debian 11 安装 可以直接从官网下载&#xff0c;也可以使用这个链接: Linux_DDNet 下载链接 上文中给的链接会因为更新而出现版本落后的情况&#x…...

OpenClaw+百川2-13B办公自动化:会议纪要生成与邮件发送全流程

OpenClaw百川2-13B办公自动化&#xff1a;会议纪要生成与邮件发送全流程 1. 为什么需要自动化会议纪要处理 上周三的部门例会让我彻底崩溃了——2小时的会议录音&#xff0c;手动整理成纪要花了整整3小时。更糟的是&#xff0c;当我终于把邮件发出去时&#xff0c;发现漏掉了…...

LFM2.5-1.2B-Thinking-GGUF开源镜像详解:llama.cpp免下载零配置部署

LFM2.5-1.2B-Thinking-GGUF开源镜像详解&#xff1a;llama.cpp免下载零配置部署 1. 模型与平台介绍 LFM2.5-1.2B-Thinking-GGUF 是由 Liquid AI 开发的轻量级文本生成模型&#xff0c;专为低资源环境优化设计。该镜像基于 llama.cpp 运行时构建&#xff0c;内置预转换的 GGUF…...

EVA-02在社交媒体分析中的应用:舆情摘要与情感倾向判断

EVA-02在社交媒体分析中的应用&#xff1a;舆情摘要与情感倾向判断 最近跟一个做品牌营销的朋友聊天&#xff0c;他正为每天要处理海量的社交媒体评论发愁。团队几个人盯着屏幕&#xff0c;手动翻看、记录、总结&#xff0c;不仅效率低&#xff0c;还容易漏掉关键信息。他问我…...

MediaPipe TouchDesigner GPU视觉插件实战:从零构建实时交互应用的完整指南

MediaPipe TouchDesigner GPU视觉插件实战&#xff1a;从零构建实时交互应用的完整指南 【免费下载链接】mediapipe-touchdesigner GPU Accelerated MediaPipe Plugin for TouchDesigner 项目地址: https://gitcode.com/gh_mirrors/me/mediapipe-touchdesigner 你是否厌…...

告别每次手动连WiFi!NVIDIA Jetson NX保姆级无线网络配置与静态IP绑定教程

NVIDIA Jetson NX无线网络配置与静态IP绑定全攻略 刚拿到NVIDIA Jetson NX开发板的开发者们&#xff0c;是否还在为每次开机都要手动连接WiFi而烦恼&#xff1f;是否因为DHCP分配的IP地址频繁变动&#xff0c;导致SSH远程连接中断而抓狂&#xff1f;本文将彻底解决这两个痛点&a…...

FireRedASR Pro Java集成开发指南:SpringBoot微服务语音处理实战

FireRedASR Pro Java集成开发指南&#xff1a;SpringBoot微服务语音处理实战 如果你是一个Java后端开发者&#xff0c;最近接到了要给系统加上语音识别功能的需求&#xff0c;比如处理用户上传的客服录音&#xff0c;或者分析会议纪要&#xff0c;那你可能正在寻找一个既稳定又…...

MangoHud日志数据可视化在线工具:无需安装的终极性能分析指南

MangoHud日志数据可视化在线工具&#xff1a;无需安装的终极性能分析指南 【免费下载链接】MangoHud A Vulkan and OpenGL overlay for monitoring FPS, temperatures, CPU/GPU load and more. Discord: https://discordapp.com/invite/Gj5YmBb 项目地址: https://gitcode.co…...

nli-distilroberta-base实战教程:使用/app.py启动NLI服务并集成到Flask后端

nli-distilroberta-base实战教程&#xff1a;使用/app.py启动NLI服务并集成到Flask后端 1. 项目概述 自然语言推理(Natural Language Inference, NLI)是自然语言处理中的一项重要任务&#xff0c;用于判断两个句子之间的逻辑关系。nli-distilroberta-base是基于DistilRoBERTa…...

Spring AI智能客服多轮问答实战:从架构设计到生产环境部署

最近在做一个智能客服项目&#xff0c;客户反馈最集中的问题就是“机器人聊着聊着就忘了前面说过什么”。比如用户想订机票&#xff0c;先问了“明天北京到上海的航班”&#xff0c;接着问“下午的呢&#xff1f;”&#xff0c;机器人很可能就懵了&#xff0c;因为它丢失了“北…...

enwork

英语口语考试(Oral English Test)作业要求Choose a topic to make an in-depth oral presentation, your topic shall be closely related to your major, your job or any project you have worked on. take a 5-minute video and submit by the 29th of March, 2026.作业提交…...