vue3中多层级路由缓存失效问题
问题现象：
在项目中路由嵌套了超过两层后，使用keep-alive对路由进行页面的缓存，发现并不能生效。
使用的路由结构：
// 一级路由path: 'menu1',component: () => import('@/views/demos/nested/menu1/index'), // Parent router-viewname: 'Menu1',meta: { title: 'Menu 1' },redirect: '/nested/menu1/menu1-1',
// 二级路由children: [{path: 'menu1-2',component: () => import('@/views/demos/nested/menu1/menu1-2'),name: 'Menu1-2',redirect: '/nested/menu1/menu1-2/menu1-2-1',meta: { title: 'Menu 1-2' },// 三级路由children: [{path: 'menu1-2-1',component: () => import('@/views/demos/nested/menu1/menu1-2/menu1-2-1'),name: 'Menu1-2-1',meta: { title: 'Menu 1-2-1' }},{path: 'menu1-2-2',component: () => import('@/views/demos/nested/menu1/menu1-2/menu1-2-2'),name: 'Menu1-2-2',meta: { title: 'Menu 1-2-2' }}]},{path: 'menu1-3',component: () => import('@/views/demos/nested/menu1/menu1-3'),name: 'Menu1-3',meta: { title: 'Menu 1-3' }}]},
问题原因：
三级及以上层级路由的界面无法缓存，据说是官方的原因，直接放三级路由是无法被keep-alive 执行生效。
解决方案
方案一：多级路由变成两级以下路由层级
router文件中使用单级路由，即所有路由都平铺，这样就只会存在一个router-view。
缺点：
- router由树结构变成了扁平结构，不能一眼看出菜单的层级关系。
- 菜单栏不能直接从route中获取，要自己另外写。
- 面包屑不能直接从route.matched里面获取，要自己一层一层封装。
建议参考这篇文章来进行多层级路由拍平的处理，将显示用的路由层级跟实际加载到router中的数据分开来： 解决基于 keep-alive 的多级路由缓存问题
方案二：增加字段判断父页面是否从详情页面返回，以决定是否需要刷新页面
在store.js中新增以下配置，默认不刷新，即需要缓存
export default new Vuex.Store({state: {// 是否要刷新页面-列表页面refreshOrderList: false,},mutations: {// 是否要刷新页面-列表页面setRefreshOrderList(state, payload) {state.refreshOrderList = payload;},},
});
列表页OrderList.vue新增以下配置：
- 在离开页面时进行判断：如果目的路由是详情页，则不需要刷新页面；否则就需要刷新。
- 页面被缓存，触发activated时重置页面，包括筛选条件等。
beforeRouteLeave(to, from, next) {if (to.name == "OrderDetail") {this.$store.commit("setRefreshOrderList", false);} else {this.$store.commit("setRefreshOrderList", true);}next();
},
activated() {// 刷新页面，重置数据if (this.$store.state.refreshOrderList) {this.pageSize = 10;this.toSearch();}
},
mounted() {this.setData();
},方案三：使用插件keep-alive-vue3
使用插件：keep-alive-vue3
参考文章：
vue3中多层级路由缓存失效问题：
解决vue中keep-alive和router-view搭配使用时(多级路由)缓存失效问题
vue keep-alive 不生效和多级（三级以上）缓存失败
解决基于 keep-alive 的多级路由缓存问题
相关文章：
vue3中多层级路由缓存失效问题
问题现象： 在项目中路由嵌套了超过两层后，使用keep-alive对路由进行页面的缓存，发现并不能生效。 使用的路由结构： // 一级路由path: menu1,component: () > import(/views/demos/nested/menu1/index), // Parent router-vie…...
Kerberoasting 离线爆破攻击
当域用户请求某个域内服务后，kdc 通常会返回一个加密的 st 服务票据，此 st 服务票据被服务 hash 加密，当我们将使用密码字典派生的多个 hash 值来尝试解密 st 服务票据，如果能够揭秘成功，则说明字典中存在目标服务账号…...
无人机双目视觉鲁棒定位方法！
无人机双目视觉鲁棒定位方法是一种先进的定位技术，它利用两个摄像头（即双目相机）模拟人的视觉系统，通过视差来确定物体的位置。这种方法在无人机定位领域具有广泛的应用前景，特别是在GPS信号拒止或弱纹理环境中&#x…...
vulnhub靶场——Log4j2
第一步:搭建靶场环境 #开启环境 cd vulhub/log4j/CVE-2021-44228 docker-compose up -d 来到网站首页 第二步:搭建一个dnslog平台上获取我们注入的效果 第三步:发现 /solr/admin/cores?action 这里有个参数可以传 我们可以看到留下了访问记录并且前面的参数被执行后给我们回…...
第十六章 C++ 字符串
C 字符串 C 提供了以下两种类型的字符串表示形式： C 风格字符串C 引入的 string 类类型 C 风格字符串 C 风格的字符串起源于 C 语言，并在 C 中继续得到支持。字符串实际上是使用 null 字符 终止的一维字符数组。因此，一个以 null 结尾的…...
centos权限大集合，覆盖多种权限类型，解惑权限后有“. + t s”问题！
在 CentOS 系统中，权限管理是操作系统的核心功能之一，确保不同用户和进程对文件、目录以及设备的访问被合理控制。 权限系统主要包括传统的 Unix 权限模型、特殊权限（SetUID、SetGID、Sticky 位）和更精细的访问控制列表ÿ…...
【k8s】访问etcd
1. 配置 export.sh export ETCDCTL_API3 # Kubernetes 1.13 使用 API v3 export ETCDCTL_ENDPOINTShttps://[2023:145:246:270::3]:2379 # etcd API endpoint，通常为集群内的 etcd 服务地址 export ETCDCTL_CACERT/etc/kubernetes/certs/ca.crt # CA 证书文件 …...
【教程宝典】基于“遥感+”蓝碳储量估算、红树林信息提取实践技术应用与科研论文写作
“遥感”助推蓝碳生态系统碳储量调查简介(1)蓝碳生态系统碳储量研究背景 红树林、海草床和盐沼是海岸带最具固碳效率的三大生态系统，统称为“蓝色碳汇”。虽然这三类生态系统的覆盖面积不到海床的0.5%，植物生物量只占陆地植物生物量的0.05%，…...
运动健康中的实体和关系
1. 实体类别 1.1 个人健康相关实体 个人（Person）：参与体育活动的个体，如运动员、健身爱好者、患者等。健康状况（HealthStatus）：描述个人的身体状态，如体重、血压、心率、身体质量指…...
【进阶编程】MVC和MVVM实现前后端分离的实现
在 WPF 开发中，通常使用 MVVM（Model-View-ViewModel）架构来分离视图和业务逻辑，但在某些情况下，你可能希望将 MVC（Model-View-Controller）模式与 MVVM 结合使用。这种结合有时是为了兼顾不同的架…...
ML-Agents 概述（二）
注：本文章为官方文档翻译，如有侵权行为请联系作者删除 ML-Agents Overview - Unity ML-Agents Toolkit–原文链接 ML-Agents 概述（一） ML-Agents 概述（二） 训练方法：特定环境 除了上一节介绍的…...
[Unity] ShaderGraph动态修改Keyword Enum，实现不同效果一键切换
上次更新已然四个月前，零零散散的工作结束，终于有时间写点东西记录一下~ 实际使用中，经常会碰到同一个对象需要切换不同的材质，固然可以通过C#直接替换材质球。 或者在ShaderGraph中使用Comparison配合Branch实现切换ÿ…...
国自然面上项目分享｜基于人工智能和病理组学的早癌筛查算法研究｜基金申请·24-12-24
小罗碎碎念 今天分享的项目为【常规面上项目】，执行年限为2018年1月至2021年12月，直接费用为55万元。 今天分享的这个项目很有意思，因为这个项目的成果是团队2020年申报基金委优青的材料，并且还有临床验证和商业转化，值…...
【EthIf-14】EthIfGeneral容器配置-02
1.实际EthIfGeneral的配置实例 关闭DET接口开启发送确认中断开启接收中断主周期接收timeout主周期 2. 代码实例参考 阅读此部分代码，搞清楚代码分为几个section，大概瞄一眼就好，不用深究其含义，只需有一个宏观的层次结构的映像即可。 //Appl/GenData/EthIf_Cfg.h #...
21.打印文件地址 C#例子
\是一个有特殊功能的字符，当想要打印一个如下地址时， C:\Users\SMTC\source\repos\练习 会出现报错，之所以会报错就是因为这里出现了\ \可以把后面的一个符号变为真符号，而不是有特殊功能的符号 在字符串的前面可以让这个字符…...
-更新中)
golang LeetCode 热题 100(动态规划)-更新中
爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？ 示例 1：输入：n 2 输出：2 解释：有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例 2&…...
Everspin代理MR25H10CDFR存储MRAM
RAMSUN提供的MR25H10CDFR是一款具备1,048,576位存储容量的磁阻随机存取存储器（MRAM）设备，由131,072个8位字构成。该设备提供与串行EEPROM和串行闪存兼容的读/写时序，无写延迟，并且其读/写寿命是不受限制的。 与其它串…...
Day13 苍穹外卖项目 工作台功能实现、Apache POI、导出数据到Excel表格
目录 1.工作台 1.1 需求分析和设计 1.1.1 产品原型 1.1.2 接口设计 1.2 代码导入 1.2.1 Controller层 1.2.2 Service层接口 1.2.3 Service层实现类 1.2.4 Mapper层 1.3 功能测试 1.4 代码提交 2.Apache POI 2.1 介绍 2.2 入门案例 2.2.1 将数据写入Excel文件 2.2.2 读取Excel文…...
基于vue框架的的校园后台报修管理系统设计与实现u7fui（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。
系统程序文件列表 项目功能：用户,维修工,报修信息,维修情况,评价记录,请假记录,改派申请记录 开题报告内容 基于Vue框架的校园后台报修管理系统设计与实现开题报告 一、项目背景及意义 随着信息技术的飞速发展，校园管理日益趋向于智能化和高效化。传…...
TCP/IP 模型中，网络层对 IP 地址的分配与路由选择
TCP/IP 模型中，网络层对 IP 地址的分配与路由选择 一. IP 地址的分配1.1 IP 地址的结构与分类1.2 IP 地址的分配方式 二. 路由选择2.3 路由协议2.4 路由表的结构2.5 路由选择的算法2.6 默认路由与静态路由 三. 网络层的 IP 地址分配与路由选择总结 前言 这是我在这个…...
废品回收小程序：助力企业转型发展
废品回收在当下日常生活中非常常见，家中的各种可回收物都能够拿到回收站进行回收，减少浪费，不过在回收物较多的情况下，回收又成为了一个问题。 目前，随着智能生活的流行，废品回收开启了“数字化时代”&…...
iptables交叉编译（Hisiav300平台）
参考文章：https://blog.csdn.net/Bgm_Nilbb/article/details/135714738 https://bbs.archlinux.org/viewtopic.php?pid1701065 1、libmnl 交叉编译 tar xvf libmnl-1.0.5.tar.bz2 sudo chmod 777 -R libmnl-1.0.5 cd libmnl-1.0.5 mkdir _install //host和CC需要修…...
概率论 期末 笔记
第一章 随机事件及其概率 利用“四大公式”求事件概率 全概率公式与贝叶斯公式 伯努利概型求概率 习题 推导 一维随机变量及其分布 离散型随机变量（R.V）求分布律 利用常见离散型分布求概率 连续型R.V相关计算 利用常见连续型分布的计算 均匀分布 正态…...
【Chrome】浏览器提示警告Chrome is moving towards a new experience
文章目录 前言一、如何去掉 前言 Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies. 这是谷歌浏览器（Chrome）关于隐私策略更新相关的提示 提示：以下是本篇文章正文内容&…...
xdoj 数字个数统计
1-3 数字个数统计 3 时间限制：1S 题目描述： 输入两个三位正整数 A 和 B，在区间[A,B]之间，或在区间[B,A]之间， 完成统计任务： 3 的倍数数字个数、4 的倍数数字个数和 5 的倍数且不是 2 的倍数 的数字个数…...
I.MX6U 启动方式详解
一、启动方式选择 BOOT 的处理过程是发生在 I.MX6U 芯片上电以后，芯片会根据 BOOT_MODE[1:0]的设置 来选择 BOOT 方式。 BOOT_MODE[1:0]的值是可以改变的，有两种方式，一种是改写 eFUSE(熔 丝)，一种是修改相应的 GPIO 高低电平。第一种修改 eFUSE 的方式只能修改一次，后面就…...
Linux自动挂载与卸载USB设备
一、实现udev规则 创建规则：sudo vi /etc/udev/rules.d/usb.rules SUBSYSTEMS"usb",SUBSYSTEM"block",ACTION"add",RUN{program}"/bin/mkdir /mnt/%k",RUN{program}"/usr/bin/systemd-mount --no-block --collect …...
下载运行Vue开源项目vue-pure-admin
git地址：GitHub - pure-admin/vue-pure-admin: 全面ESMVue3ViteElement-PlusTypeScript编写的一款后台管理系统（兼容移动端） 安装pnpm npm install -g pnpm # 国内 淘宝 镜像源 pnpm config set registry https://registry.npmmirror.com/…...
中国农业科学院深圳农业基因组研究所合成生物学研究中心-随笔06
更新读研择校贴，生物合成行业领先的单位一览SWHC002 中国科学院合成生物学重点实验室介绍-随笔05-CSDN博客 中国农业科学院深圳农业基因组研究所（基因组所）合成生物学研究中心 https://www.agis.org.cn/bsgk/yjsjj/index.htm #官网 htt…...
Java项目--仿RabbitMQ的消息队列--基于MQ的生产者消费者模型
目录 一、引言 二、生产者 三、消费者 四、扩展 五、总结 一、引言 本篇文章就是本次Java项目的最后一篇文章了，本篇文章主要介绍基于MQ的生产者消费者模型的代码编写 二、生产者 public class DemoConsumer {public static void main(String[] args) throws…...
VUE3——003、VUE 项目中的文件结构（index.html、main.ts、App.vue）
虽然是号称是小白初学，但本文只是对 VUE 小白，其它的基功还是有一丢丢的，不太懂的同学去看看一下详解，我这里记述的是自己的理解和观点。见谅！ index.html：入口文件（以创建 vue3 项目的默认文件…...
Redis+注解实现限流机制（IP、自定义等）
简介 在项目的使用过程中，限流的场景是很多的，尤其是要提供接口给外部使用的时候，但是自己去封装的话，相对比较耗时。 本方式可以使用默认（方法），ip、自定义参数进行限流，根据时间…...
SAP SD销售订单处理流程
本篇博文中的流程： 创建销售订单→依据销售订单创建交货单→依据销售订单开票 一、VA01创建销售订单 1、填入必填项，回车。可点击左上角的依照参考创建按钮。 依照参考创建可以参考以下6个。其中询价单、报价单、订单、合同和计划协议可以理解为特殊的…...
MySQL中Seconds_Behind_Master是怎么计算的
目录 1.Seconds_Behind_Master计算方式2.Seconds_Behind_Master 计算方式会存在什么问题3.更好的方式3.1 实现方法3.2 优点在MySQL中，Seconds_Behind_Master是一个用于表示从库（Slave）落后于主库（Master）的时间（以秒为单位）的指标。 1.Seconds_Behind_Master计算方式 其…...
【算法篇】——数据结构中常见八大排序算法的过程原理详解
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、插入排序1.直接插入法2.希尔排序法 二、交换排序1. 冒泡排序2. 快速排序 三、选择排序1. 简单选择排序2. 堆排序 四、归并排序五、基数排序 前言 C数据结构…...
ERP系统：从稳定运行到头条新闻
企业管理软件通常经历开发、部署、维护和最终退役的生命周期。然而，2024年，SAP等ERP系统频频登上新闻头条，反映出数字化转型过程中面临的挑战与变革。 SAP频上新闻的背后 SAP软件自上世纪90年代问世以来，便在企业管理领域占据重…...
OceanBase之primary_one概念学习
OceanBase 集群通常有若干个zone组成，zone是(Availability Zone)的简写，代表一个可用区。zone本身是一逻辑概念，物理的zone可理解为一地理概念，对OceanBase来说，zone可以理解为副本的概念。 从物理层面看，…...
国标GB28181摄像机接入EasyGBS如何通过流媒体技术提升安防监控效率？
随着信息技术的飞速发展，视频监控技术已成为维护公共安全和提升管理效率的重要手段。国标GB28181作为安防行业的统一设备接入与流媒体传输标准，为视频监控系统的互联互通提供了坚实的基础。EasyGBS作为一款基于GB28181协议的视频云服务平台，通…...
Scala_【2】变量和数据类型
第二章 注释标识符的命名规范命名规则关键字 变量字符串输出数据类型关系变量和数据类型整数类型（Byte、Short、Int、Long）浮点类型（Float、Double）字符类型（Char）布尔类型（Boolean）…...
怎么设置电脑密码？Windows和Mac设置密码的方法
为电脑设置密码是保护个人信息安全的重要措施。无论是Windows系统还是MacOS系统，设置密码的步骤都相对简单，但需要根据不同的操作系统选择不同的方法。 一、Windows系统电脑密码设置 方法一：通过控制面板设置账户密码 点击桌面左下角的“开…...
力扣251题详解：展开二维向量的多种解法与模拟面试
力扣251题详解：展开二维向量的多种解法与复杂度分析 在本篇文章中，我们将详细解读力扣第251题“展开二维向量”。通过学习本篇文章，读者将掌握如何实现一个迭代器来遍历二维向量中的所有元素，并了解相关的复杂度分析和模拟面试问…...
MoGe---最新单目3D几何估计方法
目录 一、概述 二、相关工作 1、单目深度估计 2、单目几何估计 3、相机内参估计 4、单目几何的大规模数据训练 三、前置知识 1、仿射不变和尺度不变指标 2、FOV和shift 3、ROE对齐求解器 四、MoGe 1、为什么设计仿射不变？ 2、恢复相机焦距和移位 3、…...
springboot/ssm私房菜定制上门服务系统Java代码编写web厨师上门做菜
springboot/ssm私房菜定制上门服务系统Java代码编写web厨师上门做菜 基于springboot(可改ssm)htmlvue项目 开发语言：Java 框架：springboot/可改ssm vue JDK版本：JDK1.8（或11） 服务器：tomcat 数据库&am…...
D105【python 接口自动化学习】- pytest进阶参数化用法
day105 pytest参数化parametrize多参数 学习日期：20241224 学习目标：pytest基础用法 -- pytest参数化parametrize多参数 学习笔记： 参数化 parametrize # 多次循环 pytest.mark.parametrize("a,b",[("c","d&qu…...
永磁同步电机控制算法-自适应带宽LADRC转速控制器
一、原理介绍 设计了自适应带宽 LADRC 控制方法，继承了 LADRC 优点的同时，加入自适应带宽控制，提出运用 Softsign 函数设计带宽自适应函数，根据电机转速自动调节控制带宽，解决了永磁同步电机在复杂且多变的环境下受到…...
lodash常用函数
文章目录 一、数组1、chunk分组2、difference、differenceBy、differenceWith3、findIndex4、intersection、intersectionBy、intersectionWith5、union、unionBy、unionWith 二、对象1、pick、omit 2、get、set三、数学1、sum、sumBy2、range 四、工具函数1、isEqual、isEmpty…...
Pytorch | 利用AI-FGTM针对CIFAR10上的ResNet分类器进行对抗攻击
Pytorch | 利用AI-FGTM针对CIFAR10上的ResNet分类器进行对抗攻击 CIFAR数据集AI-FGTM介绍算法流程初始化迭代更新（ t 0 t 0 t0 到 T − 1 T - 1 T−1）迭代完成 AI-FGTM代码实现AI-FGTM算法实现攻击效果 代码汇总aifgtm.pytrain.pyadvtest.py 之前已经…...
如何在谷歌浏览器中启用语音搜索
想象一下，你正在拥挤的地铁上，双手都拿着沉重的购物袋，突然你想搜索附近的咖啡馆。此时如果你能通过语音而不是打字来进行搜索，那将多么的便利！在谷歌浏览器中，启用语音搜索功能就是这么简单而高效…...
[搜广推]王树森推荐系统笔记——曝光过滤 Bloom Filter
曝光过滤 & Bloom Filter 曝光过滤主要在召回阶段做，主要方法是Bloom Filter 曝光过滤问题 -如果用户看过某个物品，则不再把该物品曝光给该用户。 - 原因是重复曝光同一个物品会损害用户体验 - 但长视频通常没有曝光过滤（youtube&…...
实现Python将csv数据导入到Neo4j
目录 一、获取数据集 1.1 获取数据集 1.2 以“记事本”方式打开文件 1.3 另存为“UTF-8”格式文件 1.4 选择“是” 二、 打开Neo4j并运行 2.1 创建新的Neo4j数据库 2.2 分别设置数据库名和密码 编辑 2.3 启动Neo4j数据库 2.4 打开Neo4j数据库 2.5 运行查看该数据库…...