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

vue3中keep-alive的使用及结合transition使用

正确用法

  1. 在组件中使用(这里结合了 transition 内置动画组件 )
<template><div class="layout clearfix"><router-view v-slot="{ Component, route }"><transition name="fade-transform" mode="out-in" v-if="!route.meta.keepAlive"><component :is="Component" :key="route.name" /></transition><transition name="fade-transform" mode="out-in" v-if="route.meta.keepAlive"><keep-alive><component :is="Component" :key="route.name"/></keep-alive></transition></router-view></div>
</template><script setup>
import { onActivated, onDeactivated } from 'vue'
// 在 keep-alive 组件激活时调用
onActivated(() => {console.log('onActivated')
})
// 在 keep-alive 组件停用时调用
onDeactivated(() => {console.log('onDeactivated')
})
</script>
  1. 在router.js中配置 keepAlive 自定义属性
import { createRouter, createWebHistory } from 'vue-router'
const routes = [{path: '/',name: 'layout',component: () => import('../layout/index.vue'),children: [{path: '/home',name: 'home',component: () => import('../views/home.vue'),meta{title: '工作台',keepAlive: true}},]},{path: '/login',name: 'login',component: () => import('../views/login.vue')},{path: '/:pathMatch(.*)',component: () => import('../views/404.vue')}
]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})export default router

根据条件缓存页面

<template><div id="app">// 1. 基本用法<router-view v-slot="{ Component, route }"><keep-alive><component :is="Component" :key="route.path"></component></keep-alive></router-view>// 2. 将缓存 name 为 a 或者 b 的组件,结合动态组件使用<router-view v-slot="{ Component, route }"><keep-alive include='a,b'><component :is="Component" key="route.path"></component></keep-alive></router-view>// 3. 使用正则表达式,需使用 v-bind<router-view v-slot="{ Component, route }"><keep-alive :include='/a|b/'><component :is="Component" key="route.path"></component></keep-alive>	</router-view>// 4.数组 (使用 `v-bind`)<router-view v-slot="{ Component, route }"><keep-alive include="['a', 'b']"><component :is="Component" key="route.path"></component></keep-alive>	</router-view>// 5.使用 max 通过传入 max 来限制可被缓存的最大组件实例数<router-view v-slot="{ Component, route }"><keep-alive :max="10"><component :is="Component" key="route.path"></component></keep-alive>	</router-view>// 6. 将不缓存 name 为 test 的组件<router-view v-slot="{ Component, route }"><keep-alive exclude='test'><component :is="Component" key="route.path"></component></keep-alive>	</router-view></div>
</template><script setup></script>

错误示例

  1. VueCompilerError: expects exactly one child element or component.
 <router-view v-slot="{ Component, route }"><transition name="fade-transform" mode="out-in" ><component :is="Component" :key="route.path" v-if="!route.meta.keepAlive"/><keep-alive><component :is="Component" :key="route.path" v-if="route.meta.keepAlive"/></keep-alive></transition>
</router-view>
  1. 不报错,但 keep-alive 内置组件的缓存没有效果,onActivated 函数也不会执行
 <router-view v-slot="{ Component, route }"><transition name="fade-transform" mode="out-in" ><component :is="Component" :key="route.path" v-if="!route.meta.keepAlive"/></transition><keep-alive><transition name="fade-transform" mode="out-in" ><component :is="Component" :key="route.path" v-if="route.meta.keepAlive"/></transition></keep-alive>
</router-view>

vue中keep-alive的使用及详解

相关文章:

vue3中keep-alive的使用及结合transition使用

正确用法 在组件中使用&#xff08;这里结合了 transition 内置动画组件 &#xff09; <template><div class"layout clearfix"><router-view v-slot"{ Component, route }"><transition name"fade-transform" mode"…...

【提示工程】询问GPT返回Json结构数据

theme: orange 众所周知&#xff0c;我们可以通过构建的Prompt获取期望的内容&#xff0c;但是通常都是以自然语言返回的&#xff0c;假如我们想得到结构化的数据&#xff0c;比如Json&#xff0c;XML那么怎么办&#xff0c;这篇文章给你一个思路。 理所当然的想法 要实现询问大…...

CSS水平垂直居中方案

1 前言 水平居中、垂直居中是前端面试百问不厌的问题。其实现方案也是多种多样&#xff0c;常叫人头昏眼花。 水平方向可以认为是内联方向&#xff0c;垂直方向认为是块级方向。 2 内联元素的水平垂直居中 首先&#xff0c;常见内联元素有&#xff1a;a、span、em、b、stro…...

SpringBoot入门篇3 - 整合junit、整合mybatis、基于SpringBoot实现ssm整合

目录 1.整合JUnit Spring整合JUnit SpringBoot整合JUnit 测试类注解&#xff1a;SpringBootTest 作用&#xff1a;设置JUnit加载的SpringBoot启动类 2.整合mybatis ①使用spring initializr初始化项目的时候&#xff0c;添加依赖。 ②设置数据源application.yml spring:d…...

C#,《小白学程序》第七课:列表(List)应用之一“编制高铁车次信息表”

1 文本格式 /// <summary> /// 车站信息类 class /// </summary> public class Station { /// <summary> /// 编号 /// </summary> public int Id { get; set; } 0; /// <summary> /// 车站名 /// </summary>…...

周报/月报 Prompt

前言 用 AI 写好一份周报或月报。 文章目录 前言一、目的二、Prompt 设计原则三、模板 一、目的 简单的日程&#xff0c;扩写成一篇高质量的周报&#xff1b; 二、Prompt 设计原则 角色 目标 背景 要求 三、模板 内容生成模板 你是我的周报助手&#xff0c;根据我的工作…...

c++ 学习 之 构造函数的分类和调用类型 深入学习

正文 构造函数是在C中用于创建和初始化对象的特殊函数。构造函数可以根据不同的特性和参数进行分类&#xff0c;以下是一些常见的构造函数分类和详细讲解它们的调用方式&#xff1a; 默认构造函数&#xff1a; 默认构造函数是一个特殊的构造函数&#xff0c;它没有参数&#x…...

Royal TSX 6 Mac多协议远程软件

Royal TSX是一款功能强大的远程桌面管理软件&#xff0c;适用于Mac操作系统。它允许用户通过一个集成的界面来管理和访问多个远程计算机和服务器。 Royal TSX支持多种远程协议&#xff0c;包括RDP、VNC、SSH、Telnet和FTP等&#xff0c;可以方便地连接到Windows、Linux、Mac和其…...

远程管理通道安全SSH协议主机验证过程

可以使用SSH协议进行远程管理通道安全保护&#xff0c;其中涉及的主要安全功能包括主机验证、数据加密性和数据完整性保护。 这里要注意的是【主机验证】和【身份验证】的区别&#xff0c;主机验证是客户端确认所访问的服务端是目标访问对象&#xff0c;比如从从客户端A(192.16…...

.NET 操作 TDengine .NET ORM

TDengine 是国内比较流的时序库之一&#xff0c;支持群集并且免费&#xff0c;在.NET中资料比较少&#xff0c;这篇文章主要介绍SqlSugar ORM来操作TDengine 优点&#xff1a; 1、SqlSugar支持ADO.NET操作来实现TDengine&#xff0c;并且支持了常用的时间函数、支持联表、分…...

SQL Server对象类型(3)——视图(View)

1. 视图概念 与Oracle中的视图类似,SQL Server中的视图也是一种虚的、通过一个查询定义的逻辑对象,主要用于集中、简化、定制用户需求,控住其底层表安全,以及应用系统提供向后兼容等方面。 --注: 1)上述内容中的“虚的”,表示视图本身并不实际包含和存储数据,SQL Ser…...

【LeetCode】剑指 Offer <二刷>(1)

目录 前言&#xff1a; 题目&#xff1a;剑指 Offer 03. 数组中重复的数字 - 力扣&#xff08;LeetCode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 写在最后&#xff1a; 前言&#xff1a; …...

MySQL事物和存储引擎

事务 一、MySQL事务的概念 事务是一种机制、一个操作序列&#xff0c;包含了一组数据库操作命令&#xff0c;并且把所有的命令作为一个整体一起向系统提交或撤销操作请求&#xff0c;即这一组数据库命令要么都执行&#xff0c;要么都不执行。 事务是一个不可分割的工作逻辑单…...

代码随想录算法训练营Day51 | 309. 最佳买卖股票时机含冷冻期 | 714. 买卖股票的最佳时机含手续费 | 股票总结

文章目录 309. 最佳买卖股票时机含冷冻期标准 dp机智的分析解法 714. 买卖股票的最佳时机含手续费贪心算法 股票总结 309. 最佳买卖股票时机含冷冻期 题目链接 | 解题思路 标准 dp 本题多了冷却期的条件&#xff0c;将原本的两个状态变得更复杂了。变化在于&#xff0c;如果…...

C#,《小白学程序》第八课:列表(List)应用之二“编制高铁列车时刻表”

1 文本格式 /// <summary> /// 车站信息类 class /// </summary> public class Station { /// <summary> /// 编号 /// </summary> public int Id { get; set; } 0; /// <summary> /// 车站名 /// </summary&g…...

2、QT的信号与槽

一、什么是信号与槽 一个对象发送一个信号出去&#xff0c;另外一个对象接收到该信号后&#xff0c;会触发相应的槽函数 二、信号与槽的语法 connect(信号的发送者&#xff0c;SIGNAL(信号名称),信号的接收者,SLOT(槽函数)); 1、写法&#xff1a; QT 4 的写法 connect(sende…...

Java代码审计15之Apache log4j2漏洞

文章目录 1、log4j简介2、复现2.1、高版本测试2.2、测试代码2.3、补充之dns探测2.3.1、rmi、ldap也可以dnslog探测 2.3.2、dnslog外带信息 3、漏洞原理3.1、漏洞的危害大的背景3.2、具体的代码调试 4、靶场测试4.1、dns探测4.2、工具下载与使用4.3、测试4.4、手工可以测出&…...

c语言每日一练(13)

前言&#xff1a;每日一练系列&#xff0c;每一期都包含5道选择题&#xff0c;2道编程题&#xff0c;博主会尽可能详细地进行讲解&#xff0c;令初学者也能听的清晰。每日一练系列会持续更新&#xff0c;上学期间将看学业情况更新。 五道选择题&#xff1a; 1、程序运行的结果…...

H5 + C3基础(六)(2D转换transform 位移 旋转 缩放)

2D转换transform & 2D转换transform平移利用平移百分比优化盒子水平垂直居中 旋转指定2d变换的中心点 transform-origin 缩放2d转换简写 2D转换transform 所谓2D转换&#xff0c;就是在二维坐标系内进行各种操作&#xff0c;包括平移&#xff0c;转动&#xff0c;缩放等等…...

2023最新 Electron.js 桌面应用开发教程(基础篇)更新中

Electron是什么&#xff1f; Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux Electron Fiddle 运行实例 Ele…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx

“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网&#xff08;IIoT&#xff09;场景中&#xff0c;结合 DDS&#xff08;Data Distribution Service&#xff09; 和 Rx&#xff08;Reactive Extensions&#xff09; 技术&#xff0c;实现 …...

JUC并发编程(二)Monitor/自旋/轻量级/锁膨胀/wait/notify/锁消除

目录 一 基础 1 概念 2 卖票问题 3 转账问题 二 锁机制与优化策略 0 Monitor 1 轻量级锁 2 锁膨胀 3 自旋 4 偏向锁 5 锁消除 6 wait /notify 7 sleep与wait的对比 8 join原理 一 基础 1 概念 临界区 一段代码块内如果存在对共享资源的多线程读写操作&#xf…...