vue3 + vue-router + keep-alive缓存页面
1.vue-router中增加mate.keepAlive和deepth属性
{path: '/',name: 'home',component: HomeView,meta: {// 当前页面要不要缓存keepAlive: false,// 当前页面层级deepth: 1,}},{path: '/list',name: 'list',component: ListView,meta: {// 当前页面要不要缓存keepAlive: true,// 当前页面层级deepth: 2,}},{path: '/info',name: 'info',component: InfoView,meta: {// 当前页面要不要缓存keepAlive: false,// 当前页面层级deepth: 3,}},
2.App.vue页面template中增加keep-alive
<template><router-view v-slot="{ Component, route }"><keep-alive :include="include"><component :is="Component" v-if="route.meta.keepAlive" /></keep-alive><component :is="Component" v-if="!route.meta.keepAlive" /></router-view>
</template>
3.App.vue页面js中增加逻辑
export default {setup() {const router = useRouter();// 用于记录实际缓存页面名称const data = reactive({include: []});router.afterEach((to, from) => {// 把要缓存的页面加入缓存列表// 如果 要 to(进入) 的页面是需要 keepAlive 缓存的,把 name push 进 include数组if (to.meta.keepAlive) {!data.include.includes(to.name) && data.include.push(to.name);}// 解决从首页进入列表页面的时候,读取的是缓存页面,如:// 第一次从首页进入列表页面,读取新数据,缓存起来,然后,返回首页// 第二次再进入列表页面,读取的是第一次进入的缓存,不更新。// 如果 要 form(离开) 的页面是 keepAlive缓存的,// 再根据 deepth 来判断是前进还是后退// 如果是后退,就把当前页面从缓存列中删除,if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {var index = data.include.indexOf(from.name);index !== -1 && data.include.splice(index, 1);}})return { ...toRefs(data) }}
}
4.在缓存实际页面增加name属性和路由中name设置的相同
// List.vue
export default {name: 'list', // 对应路由中name:'list'的值components: {},setup(){}
}
5.遇到的问题
1.一开始直接用meta.keepAlive的值判断是否需要缓存,导致从列表进入详情,再从详情返回列表的时候是对的,再从列表返回首页,再从首页进入列表就读取缓存不更新了。
2.使用keep-alive的include属性解决1中的问题。但是明明细逻辑里已经把要缓存的name加入到缓存列表中了,就是不生效。
3.在要缓存的组件中,加入name属性解决2中的问题。
相关文章:
vue3 + vue-router + keep-alive缓存页面
1.vue-router中增加mate.keepAlive和deepth属性 {path: /,name: home,component: HomeView,meta: {// 当前页面要不要缓存keepAlive: false,// 当前页面层级deepth: 1,}},{path: /list,name: list,component: ListView,meta: {// 当前页面要不要缓存keepAlive: true,// 当前页…...
unigui同页面内重定向跳转,企业微信内部应用开发获取用户code例子
procedure TMainForm.UniFormCreate(Sender: TObject); varurl: string;code: string; begin //如果没有code值,将进行重定向if UniApplication.Parameters.Values[code] thenbeginurl :https://open.weixin.qq.com/connect/oauth2/authorize?appid你们的企业ID&…...
垃圾数据啊
const arr [] //定义空数组 for (const key in this.fgkSyData) { //循环 this。sgksudata 数据arr.push( //push添加到 arr { [key]:this.fgkSyData[key] } //{} 在对象中 重新 定义key value 转换成对象) } console.log(arr, arr) …...
GB/T 29498-2013 木门窗检测
木门窗是指以木材、木质复合材料为主要材料制作框和扇的门窗。 GB/T 29498-2013 木门窗检测项目 测试项目 测试标准 外观质量 GB/T 29498 尺寸 GB/T 29498 装配质量 GB/T 29498 含水率 GB/T 17657 附着力 GB/T 4893.4 外门窗耐冷热循环 GB/T 4893.7 耐划痕 GB/…...
rocketMQ5.0顺序消息golang接入
本人理解,顺序消息如果不分消息组,那么会影响并行处理速度,所以尽量消息组分的散一些 首先上要求,官方文档如下: 总结: 1.必须同一个消息组,消息组和消费组不是一个概念,不要混 2.必…...
HuggingFace-利用BERT预训练模型实现中文情感分类(下游任务)
准备数据集 使用编码工具 首先需要加载编码工具,编码工具可以将抽象的文字转成数字,便于神经网络后续的处理,其代码如下: # 定义数据集 from transformers import BertTokenizer, BertModel, AdamW # 加载tokenizer token Ber…...
PSP - 从头搭建 抗原类别 (GPCR) 的 蛋白质结构预测 项目流程
欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/134595717 GPCRs(G Protein-Coupled Receptors,G蛋白偶联受体),又称为7次跨膜受体,是细…...
城市NOA加速落地,景联文科技高质量数据标注助力感知系统升级
当前,自动驾驶技术的演进正在经历着从基础L2到L3过渡的重要阶段,其中NOA(自动辅助导航驾驶)扮演着至关重要的角色。城市NOA(L2.9)作为城市场景下的NOA,被看作是车企向更高阶自动驾驶迈进的必经之…...
控制反转(IoC)是什么?
文章目录 控制反转(Inversion of Control,IoC)传统的程序设计中:应用程序控制程序流程控制反转设计中:由框架或容器控制程序流程IoC 的作用 举例生活例子软件工程例子 控制反转(Inversion of Control&#…...
Redisson分布式锁源码解析、集群环境存在的问题
一、使用Redisson步骤 Redisson各个锁基本所用Redisson各个锁基本所用Redisson各个锁基本所用 二、源码解析 lock锁 1) 基本思想: lock有两种方法 一种是空参 另一种是带参 * 空参方法:会默认调用看门狗的过期时间30*1000&…...
2016年10月4日 Go生态洞察:HTTP追踪介绍
🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…...
分布式篇---第四篇
系列文章目录 文章目录 系列文章目录前言一、分布式ID生成有几种方案?二、幂等解决方法有哪些?三、常见负载均衡算法有哪些?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给…...
从零开始的C++(十九)
红黑树: 一种接近平衡的二叉树,平衡程度低于搜索二叉树。 特点: 1.根节点为黑 2.黑色结点的子结点可以是红色结点或黑色结点。 3.红色结点的子结点只能是黑色结点。 4.每个结点到其所有叶子结点的路径的黑色结点个数相同。 5.指向空的…...
opencv-使用 Haar 分类器进行面部检测
Haar 分类器是一种用于对象检测的方法,最常见的应用之一是面部检测。Haar 分类器基于Haar-like 特征,这些特征可以通过计算图像中的积分图来高效地计算。 在OpenCV中,Haar 分类器被广泛用于面部检测。以下是一个简单的使用OpenCV进行面部检测…...
C++纯虚函数和抽象类 制作饮品案例(涉及知识点:继承,多态,实例化继承抽象类的子类,多文件实现项目)
一.纯虚函数的由来 在多态中,通常父类中虚函数的实现是毫无意义的,主要都是调用子类重写的内容。例如: #include<iostream>using namespace std;class AbstractCalculator { public:int m_Num1;int m_Num2;virtual int getResult(){r…...
什么是网关和链路追踪,以及怎么使用?
在云计算中,网关和链路追踪也是非常重要的。云服务提供商通常会提供网关和链路追踪等相关服务来帮助用户管理和优化云计算网络。 云计算中的网关通常包括以下几种: 虚拟网络网关:用于将云中不同虚拟网络之间相互连接,实现云内不同…...
git 文件被莫名其妙的或略且无论如何都查不到哪个.gitignore文件忽略的
先说解决办法:git check-ignore -v [文件路径] 这个命令会返回一个忽略规则,以及该规则在哪个文件中定义的,该规则使得指定的文件被忽略。 1.遇到的问题 同项目组,其他同学都可以正常的提交.meta文件,我的提交就出现以…...
nova组件简介
目录 组件关系图 controller节点 openstack-nova-api.service: openstack-nova-conductor.service: openstack-nova-consoleauth.service: openstack-nova-novncproxy.service: openstack-nova-scheduler.service: openstack-nova-conductor.service详解 作用和功能&…...
【Vue】响应式与数据劫持
Vue.js 是一个渐进式的 JavaScript 框架,其中最重要的一个特性就是响应式(Reactivity)。Vue 借助数据劫持(Data Observation)技术实现了对数据的响应式更新,当数据发生变化时,它会自动重新渲染视…...
Modbus RTU转Profinet网关连接PLC与变频器通讯在机床上应用案例
背景:以前在机床加工车间里,工人们忙碌地操作着各种机床设备。为了使整个生产过程更加高效、流畅,进行智能化改造。 方案:在机床上,PLC通过Modbus RTU转Profinet网关连接变频器进行通讯:PLC作为整个生产线…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
