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

记一次vue^2.6.5-router^3.0.6的keep-alive事故

事情的起因是这样的
一开始客户有个需求,在一个列表上面有筛选功能,通过录入筛选条件,然后进入一个detail页面,用户希望按浏览起的退回按钮,能保留之前的筛选条件,这简单,加个 keep-alive 不就好了吗
好的,然后这个需求很快完成并过去了
在这里插入图片描述

过了一阵子,突然发现怎么每次在阴功列表页面点击 「进入管理员视图」的时候,已经到了别的页面了,竟然还会调用一次应用列表的created调用列表的接口。
网上一搜这个问题,很多人的解决方案是使用keepp-alive的includes属性来解决
https://juejin.cn/post/6844904178926485511 例如这里说到的
但是我怎么设置都没有生效keepalive的作用。
这里有点欲哭无泪
百度看来是没有用的,全都是相同的解决方案,还是直接看文档吧
文档也这么写,秉着「不可能,明明文档这么写不可能会错」的精神,但我我试了好几种写法,都不行!!
我无语了,继续研究文档还有没有别的解决方案
然后看到keep-alive 的文档写到:

缓存实例的生命周期#
当一个组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时,它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时,它将重新被激活。

结合现在实际情况,可以理解为,keepalive的组件,会在每次新渲染dom的时候,它也会跟着生效created里面的事件。

接着在找文档,kepp-alive将会执行activated里面的函数,突然问题好像得到了解决。。。
created换成activated
我换成了这个后,刷新还是那个死样子,更加有点无语,
秉着「不可能,明明文档这么写不可能会错」的精神,我强制刷新了一遍。。结果就好了。。。先溜了,好饿

相关文章:

  • vi vim 快速跳到文件末尾 在最后一行下方新增一行 (光标换行,文字不换行)
  • 【我不熟悉的css】03. 使用px、em、rem
  • 1.直流无刷电机BLDC转速计算推论
  • 猿创征文|小而巧的API文档生成工具之smart-doc
  • PyTorch错误定位系列之DDP训练中 double free or corruption (out)
  • Go template详解(中)- 变量使用、if语句、迭代(数组、切片、map)、内置函数(比较、逻辑判断、打印、索引、函数调用)
  • JavaScript(三):理解异步
  • JVM阶段(3)-OutOfMemoryError异常
  • 企业运维容器之 docker 网络
  • 【QML】 如何导入QML文档目录
  • 【前端】命令行基础,linux常用命令
  • 【ZYNQ-嵌入式】zynq学习笔记(二)—— GIPO的硬件配置和软件配置
  • vue echarts 镂空饼图配置
  • 项目二:《贪吃蛇》
  • 企业运维容器之 docker仓库
  • @angular/forms 源码解析之双向绑定
  • [笔记] php常见简单功能及函数
  • Android优雅地处理按钮重复点击
  • egg(89)--egg之redis的发布和订阅
  • extract-text-webpack-plugin用法
  • js继承的实现方法
  • Laravel 菜鸟晋级之路
  • Nacos系列:Nacos的Java SDK使用
  • Netty 框架总结「ChannelHandler 及 EventLoop」
  • python大佬养成计划----difflib模块
  • vue2.0开发聊天程序(四) 完整体验一次Vue开发(下)
  • Web Storage相关
  • 电商搜索引擎的架构设计和性能优化
  • 事件委托的小应用
  • 新版博客前端前瞻
  • 一个JAVA程序员成长之路分享
  • 运行时添加log4j2的appender
  • 06-01 点餐小程序前台界面搭建
  • #设计模式#4.6 Flyweight(享元) 对象结构型模式
  • ${factoryList }后面有空格不影响
  • $jQuery 重写Alert样式方法
  • (13)Hive调优——动态分区导致的小文件问题
  • (C#)if (this == null)?你在逗我,this 怎么可能为 null!用 IL 编译和反编译看穿一切
  • (delphi11最新学习资料) Object Pascal 学习笔记---第7章第3节(封装和窗体)
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明
  • (转)Linux整合apache和tomcat构建Web服务器
  • .NET 8 编写 LiteDB vs SQLite 数据库 CRUD 接口性能测试(准备篇)
  • .NET 的程序集加载上下文
  • .net 生成二级域名
  • .NET/C# 避免调试器不小心提前计算本应延迟计算的值
  • .NET/C# 反射的的性能数据,以及高性能开发建议(反射获取 Attribute 和反射调用方法)
  • .net6解除文件上传限制。Multipart body length limit 16384 exceeded
  • .NET6实现破解Modbus poll点表配置文件
  • .NET开源项目介绍及资源推荐:数据持久层
  • .NET正则基础之——正则委托
  • .net中生成excel后调整宽度
  • /使用匿名内部类来复写Handler当中的handlerMessage()方法
  • @ 代码随想录算法训练营第8周(C语言)|Day57(动态规划)
  • [20150321]索引空块的问题.txt