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作为整个生产线…...
python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
EtherNet/IP转DeviceNet协议网关详解
一,设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络,本网关连接到EtherNet/IP总线中做为从站使用,连接到DeviceNet总线中做为从站使用。 在自动…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称:装饰器模式(Decorator Pattern) 👦 小明最近上线了校园奶茶配送功能,业务火爆,大家都在加料: 有的同学要加波霸 🟤,有的要加椰果…...
人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent
安全大模型训练计划:基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标:为安全大模型创建高质量、去偏、符合伦理的训练数据集,涵盖安全相关任务(如有害内容检测、隐私保护、道德推理等)。 1.1 数据收集 描…...
spring boot使用HttpServletResponse实现sse后端流式输出消息
1.以前只是看过SSE的相关文章,没有具体实践,这次接入AI大模型使用到了流式输出,涉及到给前端流式返回,所以记录一下。 2.resp要设置为text/event-stream resp.setContentType("text/event-stream"); resp.setCharacter…...
JUC并发编程(二)Monitor/自旋/轻量级/锁膨胀/wait/notify/锁消除
目录 一 基础 1 概念 2 卖票问题 3 转账问题 二 锁机制与优化策略 0 Monitor 1 轻量级锁 2 锁膨胀 3 自旋 4 偏向锁 5 锁消除 6 wait /notify 7 sleep与wait的对比 8 join原理 一 基础 1 概念 临界区 一段代码块内如果存在对共享资源的多线程读写操作…...
