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

keep-alive的使用-及遇到的问题

被keep-alive包括的的组件,当组件切换是不是走销毁流程,而是缓存起来

keep-alive有三个参数include匹配name名被缓存,exclude匹配name名不会被缓存,max被缓存组件数量

不写,组件默认全部缓存

<keep-alive ><router-view/>
</keep-alive>

 include匹配参数--name指的.vue组件内的name名

   数组方式匹配name<keep-alive :include="['HomeViewPage','AboutViewPage']"><router-view/></keep-alive> -->,分隔方式匹配name<keep-alive include="HomeViewPage,AboutViewPage"><router-view/></keep-alive>正则方式匹配name<keep-alive :include="/HomeViewPage|AboutViewPage/"><router-view/></keep-alive>

搭配路由使用-在meta中设置自定义键值对,命名推荐语义化,使用keepAlive

 {path: '/',name: 'home',component: HomeView,meta: {keepAlive: true}}

 route是跳转的路由对象,里面有hash,meta,name,query等等,此处使用mate里我们设置keepAlive的值作为判断,因为v-if和v-else不能分开使用,使用两个v-if,如果是ture就使用包裹在keep-alive的路由出口,是false就使用未被包裹的路由出口,达到设置路由缓存

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

配合组件内的beforeRouteleave路由守卫来使用的话,可以达到如果是在编辑界面,或者新增界面,想切换界面却想缓存输入的部分内容,来提示编辑新增未完成,是否暂存内容,修改meta来达到效果

// 导航离开该组件的对应路由时调用beforeRouteLeave (to, from, next) {console.log(from.meta.keepAlive, 'hom')// 改变状态// from.meta.keepAlive = falsenext()}

被包裹的组件会多出两个生命周期钩子

在created和mounted之后

activated

在 keep-alive 组件激活时调用

该钩子函数在服务器端渲染期间不被调用

如果要在每次进入页面的时候获取最新的数据,需要在 activated 阶段获取数据,承担原来 created 钩子函数中获取数据的任务。

deactivated

在 keep-alive 组件停用时调用

该钩子在服务器端渲染期间不被调用

=========================================================================

此处遇到问题

编辑新增未完成,是否暂存内容,表单内容缓存,但是点击提交之后再次进入,缓存信息仍然存在

提交完表单之后,下一次提交的时候,如何删除上一次缓存问题。

vue 支持 keep-alive 组件,如果启用,页面内的所有数据都会被保留,所以,上文的互动行为二后退时保留前一页数据继续操作没有问题。

问题出在互动行为一用户前进时总是进入新页面,然而一旦缓存,你就没法总是进新页面了,你总是进入缓存页,这就很让人头疼了。

官方提供了includeexclude特性,说你可以决定哪些页面使用缓存哪些页面不用缓存。链接

然而问题又回到了原点,并没有解决我们酌情决定是否使用已缓存的缓存这一需求。

所以很多人想到了一个方法在离开页面时销毁这个页面是不是就可以了,然而并不能,这里出现了 bug ,组件销毁了缓存还在

学习借鉴-这个是从根源解决问题-Vue 全站缓存之 keep-alive : 动态移除缓存 - 阿星的空间

查阅其他得到方法

使用this.$router.go(0)也可以,但是页面会闪动白屏一下(好处简单一行代码搞定)

location.reload()

这种也是一样,画面一闪,效果总不是很好。

跳转空白页再跳回原页面

新建一个空白页面empty.vue,点击确定的时候先跳转到这个空白页,然后再立马跳转回来。
在需要刷新的页面添加

this.$router.replace({ path:'/empty' })

路由跳转

在空白页的created函数中添加路由跳转:

created(){
this.$router.replace({ path:'待刷新页面的path路径' })
}

这个方式,相比前两种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,可采用

通过(组件守卫,来做判断,提交不缓存,离开其他情况进行缓存--)

// 导航离开该组件的对应路由时调用beforeRouteLeave (to, from, next) {console.log(from.meta.keepAlive, 'hom')// 改变状态// from.meta.keepAlive = falsenext()}

相关文章:

keep-alive的使用-及遇到的问题

被keep-alive包括的的组件&#xff0c;当组件切换是不是走销毁流程&#xff0c;而是缓存起来 keep-alive有三个参数include匹配name名被缓存&#xff0c;exclude匹配name名不会被缓存&#xff0c;max被缓存组件数量 不写&#xff0c;组件默认全部缓存 <keep-alive ><…...

华为OD面试经验分享,尤其注意机试题部分

文章目录招聘流程和背景介绍面试准备机试题目类型和解答技巧在算法部分在操作系统部分面试官提问和答题技巧面试总结和建议推荐一些华为 od 常见的机试题题目&#xff1a;两数之和题目&#xff1a;二叉树的遍历题目&#xff1a;链表反转题目&#xff1a;最大子序和招聘流程和背…...

【Java】String、StringBuffer、StringBuilder的区别

一、String 由 char[] 数组构成&#xff0c;使用了 final 修饰&#xff0c;String的值是不可变的&#xff0c;这就导致每次对String的操作都会生成新的String对象&#xff0c;然后把指针指向新的引用对象&#xff0c;不仅效率低下&#xff0c;而且浪费大量优先的内存空间。 二…...

iOS开发:对Block使用的一次研究总结

在开发中Block是经常使用的,那我们就得知其然,知其所以然。 Block是什么? Block可以封装一个匿名函数为对象,并捕获上下文所需的数据,并传给目标对象在适当的时候回调。我们使用Block的目的其实就是回调传值,那我们去看看Block的底层,再深入了解一下Block。 Block的底…...

Spark 3.1.1 shuffle fetch 导致shuffle错位的问题

背景 最近从数据仓库小组那边反馈了一个问题,一个SQL任务出来的结果不正确&#xff0c;重新运行一次之后就没问题了&#xff0c;具体的SQL如下&#xff1a; select col1,count(1) as cnt from table1 where dt 20230202 group by col1 having count(1) > 1这个问题是偶发…...

2月第2周榜单丨飞瓜数据B站UP主排行榜(哔哩哔哩平台)发布!

飞瓜轻数发布2023年2月6日-2月12日飞瓜数据UP主排行榜&#xff08;B站平台&#xff09;&#xff0c;通过充电数、涨粉数、成长指数三个维度来体现UP主账号成长的情况&#xff0c;为用户提供B站号综合价值的数据参考&#xff0c;根据UP主成长情况用户能够快速找到运营能力强的B站…...

Jdk19 动态编译 Java源码为 Class 文件

动态编译 Java 源码为 Class一.背景1.Jdk 版本2.需求二.Java 源码动态编译实现1.Maven 依赖2.源码包装类3.Java 文件对象封装类4.文件管理器封装类5.类加载器6.类编译器三.动态编译测试1.普通测试类2.接口实现类3.测试四.用动态编译 Class 替换 SpringBoot 的 Bean&#xff08;…...

安装 GPU 版本的 tensorflow 完整版本

前言&#xff1a; 之前安装的 CPU 版本的 tensorflow 一直出问题&#xff0c;索性就直接安装 GPU 版本的 tensorflow 了&#xff08;有了GPU 就不能浪费&#xff09;。 安装过程&#xff1a; 1&#xff09;看自己有无 GPU&#xff0c;找到对应 GPU 的版本&#xff1a;任务管理…...

BOM编程-设置地址栏上的URL

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>设置地址栏上的URL</title> </head> <body> <script> function go(){ // 获…...

设计模式之原型模式与建造者模式详解和应用

目录1 原型模式1.1 原型模式定义1.2 原型模式的应用场景1.3 原型模式的通用写法&#xff08;浅拷贝&#xff09;1.4 使用序列化实现深度克隆1.5 克隆破坏单例模式1.6 原型模式在源码中的应用1.7 原型模式的优缺点1.8 总结2 建造者模式2.1 建造者模式定义2.2 建造者模式的应用场…...

C语言(函数和递归)

函数是完成特定任务的独立程序代码单元。 目录 一.函数 1.创建一个简单的函数 2.定义带形式参数的函数 3.使用return从函数中返回值 二.递归 一.函数 1.创建一个简单的函数 #include <stdio.h> void print(void); //函数原型 int main(){ print(); //函…...

快乐的shell命令行

快乐的shell命令行 PART1——基础 1.权限 #超级用户权限$普通用户 2.复制粘贴 复制&#xff1a;鼠标左键沿着文本拖动高亮的文本被复制到X管理的缓冲区&#xff08;或者双击一个单词&#xff09;粘贴&#xff1a;鼠标中键 3.简单命令 时间和日期date当前月份的日历cal磁…...

大数据面试题flume篇

1.Flume 的Source&#xff0c;Sink&#xff0c;Channel 的作用&#xff1f;你们Source 是什么类型&#xff1f; 1. 作用 &#xff08;1&#xff09;Source组件是专门用来收集数据的&#xff0c;可以处理各种类型、各种格式的日志数据&#xff0c;包括 avro、thrift、exec、jm…...

零信任-深信服零信任aTrust介绍(5)

​深信服零信任aTrust介绍 深信服是国内领先的互联网信任服务提供商&#xff0c;也是国内首家通过认证的全球信任服务商。深信服零信任是其中一项核心的信任技术&#xff0c;主要针对身份认证、数字签名、数字证书等方面的信任问题。 深信服零信任提供了一种新的安全保护模式…...

UVa 1343 The Rotation Game 旋转游戏 IDA* BFS 路径还原

题目链接&#xff1a;The Rotation Game 题目描述&#xff1a; 给定二十四个整数&#xff0c;这二十四个整数由八个一&#xff0c;八个二&#xff0c;八个三组成&#xff0c;从左到右&#xff0c;从上到下依次描述下图方格中的数字&#xff1a; 例如上图左边对应的输入就是[1,…...

硬件学习 软件Cadence day02 画原理图的基本操作 (键盘快捷键 , 原理图设计流程 , 从开始到导出网表流程)

1. ORCAD Capture cls 界面的快捷键 键盘 按键对应的操作I放大 &#xff08;可以滚轮操作&#xff09;O缩小 &#xff08;可以滚轮操作&#xff09;W画线Esc退出现在的状态 &#xff08;画图界面 右键 End xxx&#xff09;N放置网络标号J放置节点 (控制…...

【python】基于Socket的聊天室Python开发

基于Socket的聊天室Python开发一、Socket简述二、创建服务端Server2.1 创建服务端初始化2.2 监听客户端连接2.3 处理客户端消息三、创建客户端Client3.1 创建服务端初始化3.2 发送消息3.3 接收消息3.3 线程工作3.4 线程工作是不是挺好玩的呢&#xff1f;也可以作为课程设计哦&a…...

2023想转行软件测试的看过来,你想要了解的薪资、前景、岗位方向、学习路线都讲明白了

在过去的一年中&#xff0c;软件测试行业发展迅速&#xff0c;随着数字化技术应用的广泛普及&#xff0c;业界对于软件测试的要求也在持续迭代与增加。 同样的&#xff0c;有市场就有需求&#xff0c;软件测试逐渐成为企业中不可或缺的岗位&#xff0c;作为一个高薪又需求广的…...

TortoiseSVN的使用

基本概念 版本库 SVN保持数据的地方&#xff0c;所有的文件都保存在这个库中&#xff0c;Tortoise访问的就是远程服务器上的Subversion版本库。 工作拷贝 就是工作副本&#xff0c;可将版本库的文件拷贝到本地中&#xff0c;可以任意修改&#xff0c; 不会影响版本库。在你…...

操作系统(day09) -- 连续分配管理方式

连续分配管理方式 单元连续分配 动态分区分配 1.系统要用什么样的数据结构记录内存的使用情况&#xff1f; 两种常用的数据结构 空闲分区表 每个空闲分区对应一个表项。表项中包含分区号、分区大小、分区起始地址等信息空闲分区链 每个分区的起始部分和末尾部分分别设置前向…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

数据结构:泰勒展开式:霍纳法则(Horner‘s Rule)

目录 &#x1f50d; 若用递归计算每一项&#xff0c;会发生什么&#xff1f; Horners Rule&#xff08;霍纳法则&#xff09; 第一步&#xff1a;我们从最原始的泰勒公式出发 第二步&#xff1a;从形式上重新观察展开式 &#x1f31f; 第三步&#xff1a;引出霍纳法则&…...