vue如何实现路由缓存
(以下示例皆是以vue3+vite+ts项目为例)
场景一:所有路由都可以进行缓存
在渲染路由视图对应的页面进行缓存设置,代码如下:
<template><router-view v-slot="{ Component, route }"><transition name="router-fade" mode="out-in"><keep-alive><component :is="Component" :key="route.fullPath" /></keep-alive></transition></router-view>
</template>
<router-view>:用来渲染当前路由对应的视图。
v-slot:解构router-view的插槽属性来访问当前路由的组件(Component)和路由对象(route)。
<transition>:用于实现页面路由切换时的过渡动画效果,可省略。
name="router-fade":定义过渡动画类名为router-fade,如router-fade-enter-active。mode="out-in":设置过渡模式为先出后进,即新组件先渲染,旧组件再离开
切记:虽然vue3支持一个组件中有多个根节点,但是<transition>不支持多个根节点,否者页面无法正确显示,例如:打开缓存过的页面会出现白屏现象。
<keep-alive>:用来缓存路由组件。
<component>:用来动态渲染组件。
:is="Component":表示要渲染的组件由Component变量决定。:key="route.fullPath":为组件添加唯一的键值,确保路由发生变化时触发组件的重新渲染。
场景二:动态设置可以缓存的路由
1. 在router中配置keepAlive,设置支持缓存的页面,例如
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Layout from '../views/layout/index.vue';
const routes: Array<RouteRecordRaw> = [{path: '/',name: 'Layout',component: Layout,meta:{keepAlive:true //支持缓存}},{path: '/about',name: 'About',component: () => import("../views/about/index.vue"),meta:{keepAlive:false //不支持缓存}},
];const router = createRouter({history: createWebHistory(),routes
});export default router;
2. 在支持缓存的对应页面中设置name ,此name必须于路由中设置的name一致。
<script setup lang="ts">
// 使用 defineOptions 设置组件的 name 属性
defineOptions({name: 'Layout'
});
</script>
3.在渲染路由视图对应的页面进行缓存设置,代码如下:
(相比场景一,多了:include="cachedViews"的设置)
<template><router-view v-slot="{ Component, route }"><transition name="router-fade" mode="out-in"><keep-alive :include="cachedViews"><component :is="Component" :key="route.fullPath" /></keep-alive></transition></router-view>
</template>
<script setup lang="ts">
import {ref,watchEffect} from "vue";
import { useRoute } from 'vue-router';
// 定义缓存的视图数组
const cachedViews=ref<string[]>([])
const route = useRoute();
// 监听路由变化
watchEffect(() => {const name = route.name as string;if (route.meta.keepAlive) {if (!cachedViews.value.includes(name)) cachedViews.value.push(name);} else {const index = cachedViews.value.indexOf(name);if (index > -1)cachedViews.value.splice(index, 1);}
});
</script>
相关文章:
vue如何实现路由缓存
(以下示例皆是以vue3vitets项目为例) 场景一:所有路由都可以进行缓存 在渲染路由视图对应的页面进行缓存设置,代码如下: <template><router-view v-slot"{ Component, route }"><transiti…...
基于Openjdk容器打包运行jar程序
文章目录 应用场景基于Openjdk容器打包运行jar程序1.编译项目成jar包2.构建Dockerfile文件精简版-含jar包精简版-不含jar包带注释版-含jar包 3.编译Dockerfile成镜像。4.运行镜像: 应用场景 部署多版本jdk的应用程序。 基于Openjdk容器打包运行jar程序 1.编译项目…...
DNN学习平台(GoogleNet、SSD、FastRCNN、Yolov3)
DNN学习平台(GoogleNet、SSD、FastRCNN、Yolov3) 前言相关介绍1,登录界面:2,主界面:3,部分功能演示如下(1)识别网络图片(2)GoogleNet分类…...
HTTP协议(超文本传输协议)
HTTP请求消息 http请求消息组成: 请求行 :包含请求的方法 操作资源的地址 协议的版本号 http请求方法: GET:从服务器获取资源 POST:添加资源信息 PUT:请求服务器更新资源信息 DELETE:请…...
FFmpeg的日志系统(ubuntu 环境)
1. 新建.c文件 vim ffmpeg_log.c2. 输入文本 #include<stdio.h> #include<libavutil/log.h> int main() {av_log_set_level(AV_LOG_DEBUG);av_log(NULL,AV_LOG_INFO,"hello world");return 0; }当log level < AV_LOG_DEBUG 都可以印出来 #define A…...
浅析VO、DTO、DO、PO
一、概念介绍 POJO(plain ordinary java object) : 简单java对象,个人感觉POJO是最常见最多变的对象,是一个中间对象,也是我们最常打交道的对象。一个POJO持久化以后就是PO,直接用它传递、传递…...
android kotlin基础复习 enum
1、kotlin中,关键字enum来定义枚举类型。枚举类型可以包含多个枚举常量,并且每个枚举常量可以有自己的属性和方法。 2、测试代码: enum class Color{RED,YELLOW,BLACK,GOLD,BLUE,GREEN,WHITE }inline fun <reified T : Enum<T>>…...
个股场外期权怎么交易?场外期权交易流程是怎样的?
今天带你了解个股场外期权怎么交易?场外期权交易流程是怎样的?个股场外期权是一种非标准化的期权合约,通常在场外市场(OTC市场)由金融机构和投资者之间进行交易。 场外个股期权主要功能 风险管理: 帮助投…...
企业选ETL还是ELT架构?
作为数据处理的重要工具,ETL工具被广泛使用,同时ETL也是数据仓库中的重要环节。本文将从解释ETL工具是怎么处理数据,同时介绍ELT和ETL工具在企业搭建数据仓库的重要优势。 一、什么是ETL? ETL是Extract-Transform-Load的缩写,将…...
【Spring Boot 3】【Web】同时启用 HTTP 和 HTTPS
【Spring Boot 3】【Web】同时启用 HTTP 和 HTTPS 背景介绍开发环境开发步骤及源码工程目录结构背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总是…...
【Android】最好用的网络库:Retrofit
最好用的网络库:Retrofit 文章目录 最好用的网络库:RetrofitRetrofit的基本用法Retrofit的使用逻辑Retrofit的基本操作处理复杂的接口地址类型进阶删除提交header中指定参数 Retrofit构建器的最佳写法Retrofit的使用封装 用户网络请求的接口配置繁琐&…...
SpringBoot自动化配置原理
SpringBoot自动化配置原理 01-SpringBoot2高级-starter依赖管理机制 目的:通过依赖能了解SpringBoot管理了哪些starter 讲解: 通过依赖 spring-boot-dependencies 搜索 starter- 发现非常多的官方starter,并且已经帮助我们管理好了版本。 …...
2024级新生数组字符串专题题解
一、题解: 1.A-[NOIP2005]校门外的树_24级新生数组字符串训练题 (nowcoder.com) 这题常见的解法有两种: 第一种是这道题我们可以直接按照题目意思枚举 #include<bits/stdc.h> #define int long long using namespace std;int road[10010];sig…...
C++学习 虚函数,容器
一、虚函数 虚函数是C中的一种函数,允许子类重写父类中的函数,以便在运行时通过基类指针或引用调用子类的函数实现。虚函数的主要作用是实现多态性,这使得基类指针或引用可以根据实际指向的对象类型调用不同的函数实现。具体用法 虚函数的声…...
MacTalk 测评通义灵码,如何实现“微信表情”小功能?
作者:池建强,墨问西东创始人 前段时间,我写了篇墨问研发团队放弃 GitHub Copilot 的文章,没想到留言区一些读者推荐我们试试通义灵码,说它效果很不错。我呢,一直没腾出时间折腾。 直到月中时,…...
Canvas Confetti - 免费开源的五彩纸屑飞舞特效的 JS 库,多用于在网页上实现欢乐庆祝的场景
今天看科技周刊看到的一个酷炫的动效库,使用简单,视觉效果很好,推荐给大家。 Canvas Confetti 是一个基于 JavaScript 的特效动画库,可以在网页界面上轻松地实现五彩纸屑飞舞的庆祝场景特效。这个特效库封装了几种酷炫的特效&…...
[数据集][目标检测]智慧牧场猪只检测数据集VOC+YOLO格式16245张1类别
数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):16245 标注数量(xml文件个数):16245 标注数量(txt文件个数):16245 标…...
GS-SLAM论文阅读笔记--LoopSplat
介绍 这篇文章看标题是解决GS-SLAM回环检测的,GS-SLAM回环检测之前文章很少,但他对于SLAM又很重要,确实值得阅读一番。而且这些作者的学校又是很厉害的。 文章目录 介绍1.背景介绍2.关键内容2.1 Gaussian Splatting SLAM2.2 Gaussian Splat…...
Mysql数据库表结构迁移PostgreSQL
1、背景: 公司本来用的数据库都是mysql,为了国产化适配兼容pg和dm。dm提供了数据迁移工具,可以直接做数据迁移,生成脚本之后在其他环境执行。但是pg貌似没有工具能直接用。navicat由于版权问题公司也用不了。pgloader使用总是有问…...
店匠科技携手Stripe共谋电商支付新篇章
在全球电商行业蓬勃发展的背景下,支付环节作为交易闭环的核心,其重要性日益凸显。随着消费者对支付体验要求的不断提高,以及跨境电商的迅猛发展,支付市场正经历着前所未有的变革与挑战。在这一充满机遇与竞争的领域,店匠科技(Shoplazza)凭借其创新的嵌入式支付解决方案—— Sho…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1
每日一言 生活的美好,总是藏在那些你咬牙坚持的日子里。 硬件:OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写,"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
