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…...
PSSE与IEEE数据格式互转实战:解决变压器参数异常的避坑指南
PSSE与IEEE数据格式互转实战:变压器参数异常分析与精准修正 电力系统仿真工程师在日常工作中经常面临不同软件平台间数据迁移的挑战。当您手头的IEEE标准潮流数据需要导入PSSE进行分析时,数据格式转换过程中的参数映射问题可能成为影响仿真精度的隐形杀…...
PRJ引起的tif影像导入global mapper/CASS位置异常以及PRJ参数的说明
1 问题描述 将Pix4Dmapper生成的tif拖入global mapper,发现投影中央子午线不对,导致位置异常。并且将影像插入cass,影像出现了拉伸、显示错误等问题。 查看prj文件,central_meridian为112.5,而global mapper识别为114。…...
OBS-Multi-RTMP:多平台直播高效同步解决方案
OBS-Multi-RTMP:多平台直播高效同步解决方案 【免费下载链接】obs-multi-rtmp OBS複数サイト同時配信プラグイン 项目地址: https://gitcode.com/gh_mirrors/ob/obs-multi-rtmp OBS-Multi-RTMP作为一款专注于多平台直播同步的开源插件,能够帮助直…...
终极Android UI开发指南:XUI框架与Material Design完美融合实战
终极Android UI开发指南:XUI框架与Material Design完美融合实战 【免费下载链接】XUI 💍A simple and elegant Android native UI framework, free your hands! (一个简洁而优雅的Android原生UI框架,解放你的双手!) 项目地址: h…...
Cosmos-Reason1-7B实战教程:构建具身AI测试平台的完整技术路径
Cosmos-Reason1-7B实战教程:构建具身AI测试平台的完整技术路径 1. 项目简介:一个能“看懂”物理世界的AI 想象一下,你给AI看一张照片,它不仅能告诉你“图片里有一张桌子”,还能分析出“桌子上的杯子快要倒了…...
WGAN-GP实战指南:从梯度惩罚到高质量数字图像生成
1. 为什么需要WGAN-GP:从GAN的痛点说起 第一次用传统GAN生成手写数字时,我盯着屏幕上一团模糊的像素点发呆——这跟我想象中的"以假乱真"相差甚远。后来才发现,这其实是GAN训练中典型的模式崩溃现象。传统GAN使用JS散度作为损失函数…...
如何解决Oracle JDBC驱动版本的兼容性问题_ojdbc8.jar与JDK版本的对应关系
不是。ojdbc8.jar 支持JDK 8及以上(含11/17/21),关键看运行时JVM版本≥8;它实现JDBC 4.2规范,兼容Oracle 11g至21c,非仅限JDK 8。ojdbc8.jar 真的只支持 JDK 8 吗?不是。ojdbc8.jar 是 oracle 官…...
别再死记硬背了!用LL(1)预测分析法图解编译原理语法分析,5分钟搞懂First和Follow集
用派对邀请链和拆礼物理解LL(1)语法分析:First集与Follow集的趣味图解 想象你正在策划一场派对,需要根据客人的喜好安排座位。First集就像拆开礼物盒时最先看到的物品,而Follow集则是始终跟在某位客人身后的"小跟班"。这种生活化的…...
别只用自带库了!LTspice仿真进阶:手把手教你搭建带运放的‘智能’稳压电路,性能对比一目了然
别只用自带库了!LTspice仿真进阶:手把手教你搭建带运放的‘智能’稳压电路,性能对比一目了然 在电子设计领域,稳压电路就像是为系统提供稳定"血液"的心脏。许多工程师习惯使用LTspice自带库中的齐纳二极管快速搭建基础稳…...
BLDC电机控制原理与PWM技术详解
1. BLDC电机控制基础解析无刷直流电机(BLDC)作为现代电机控制领域的重要成员,其控制原理与传统有刷电机存在本质差异。BLDC电机通过电子换向取代机械换向,这种设计带来了更高的效率和可靠性,但同时也增加了控制复杂度。…...
