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

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如何实现路由缓存

&#xff08;以下示例皆是以vue3vitets项目为例&#xff09; 场景一&#xff1a;所有路由都可以进行缓存 在渲染路由视图对应的页面进行缓存设置&#xff0c;代码如下&#xff1a; <template><router-view v-slot"{ Component, route }"><transiti…...

基于Openjdk容器打包运行jar程序

文章目录 应用场景基于Openjdk容器打包运行jar程序1.编译项目成jar包2.构建Dockerfile文件精简版-含jar包精简版-不含jar包带注释版-含jar包 3.编译Dockerfile成镜像。4.运行镜像&#xff1a; 应用场景 部署多版本jdk的应用程序。 基于Openjdk容器打包运行jar程序 1.编译项目…...

DNN学习平台(GoogleNet、SSD、FastRCNN、Yolov3)

DNN学习平台&#xff08;GoogleNet、SSD、FastRCNN、Yolov3&#xff09; 前言相关介绍1&#xff0c;登录界面&#xff1a;2&#xff0c;主界面&#xff1a;3&#xff0c;部分功能演示如下&#xff08;1&#xff09;识别网络图片&#xff08;2&#xff09;GoogleNet分类&#xf…...

HTTP协议(超文本传输协议)

HTTP请求消息 http请求消息组成&#xff1a; 请求行 &#xff1a;包含请求的方法 操作资源的地址 协议的版本号 http请求方法&#xff1a; GET&#xff1a;从服务器获取资源 POST&#xff1a;添加资源信息 PUT&#xff1a;请求服务器更新资源信息 DELETE&#xff1a;请…...

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&#xff08;plain ordinary java object&#xff09; &#xff1a; 简单java对象&#xff0c;个人感觉POJO是最常见最多变的对象&#xff0c;是一个中间对象&#xff0c;也是我们最常打交道的对象。一个POJO持久化以后就是PO&#xff0c;直接用它传递、传递…...

android kotlin基础复习 enum

1、kotlin中&#xff0c;关键字enum来定义枚举类型。枚举类型可以包含多个枚举常量&#xff0c;并且每个枚举常量可以有自己的属性和方法。 2、测试代码&#xff1a; enum class Color{RED,YELLOW,BLACK,GOLD,BLUE,GREEN,WHITE }inline fun <reified T : Enum<T>>…...

个股场外期权怎么交易?场外期权交易流程是怎样的?

今天带你了解个股场外期权怎么交易&#xff1f;场外期权交易流程是怎样的&#xff1f;个股场外期权是一种非标准化的期权合约&#xff0c;通常在场外市场&#xff08;OTC市场&#xff09;由金融机构和投资者之间进行交易。 场外个股期权主要功能 风险管理&#xff1a; 帮助投…...

企业选ETL还是ELT架构?

作为数据处理的重要工具&#xff0c;ETL工具被广泛使用&#xff0c;同时ETL也是数据仓库中的重要环节。本文将从解释ETL工具是怎么处理数据&#xff0c;同时介绍ELT和ETL工具在企业搭建数据仓库的重要优势。 一、什么是ETL? ETL是Extract-Transform-Load的缩写&#xff0c;将…...

【Spring Boot 3】【Web】同时启用 HTTP 和 HTTPS

【Spring Boot 3】【Web】同时启用 HTTP 和 HTTPS 背景介绍开发环境开发步骤及源码工程目录结构背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总是…...

【Android】最好用的网络库:Retrofit

最好用的网络库&#xff1a;Retrofit 文章目录 最好用的网络库&#xff1a;RetrofitRetrofit的基本用法Retrofit的使用逻辑Retrofit的基本操作处理复杂的接口地址类型进阶删除提交header中指定参数 Retrofit构建器的最佳写法Retrofit的使用封装 用户网络请求的接口配置繁琐&…...

SpringBoot自动化配置原理

SpringBoot自动化配置原理 01-SpringBoot2高级-starter依赖管理机制 目的&#xff1a;通过依赖能了解SpringBoot管理了哪些starter 讲解&#xff1a; 通过依赖 spring-boot-dependencies 搜索 starter- 发现非常多的官方starter&#xff0c;并且已经帮助我们管理好了版本。 …...

2024级新生数组字符串专题题解

一、题解&#xff1a; 1.A-[NOIP2005]校门外的树_24级新生数组字符串训练题 (nowcoder.com) 这题常见的解法有两种&#xff1a; 第一种是这道题我们可以直接按照题目意思枚举 #include<bits/stdc.h> #define int long long using namespace std;int road[10010];sig…...

C++学习 虚函数,容器

一、虚函数 虚函数是C中的一种函数&#xff0c;允许子类重写父类中的函数&#xff0c;以便在运行时通过基类指针或引用调用子类的函数实现。虚函数的主要作用是实现多态性&#xff0c;这使得基类指针或引用可以根据实际指向的对象类型调用不同的函数实现。具体用法 虚函数的声…...

MacTalk 测评通义灵码,如何实现“微信表情”小功能?

作者&#xff1a;池建强&#xff0c;墨问西东创始人 前段时间&#xff0c;我写了篇墨问研发团队放弃 GitHub Copilot 的文章&#xff0c;没想到留言区一些读者推荐我们试试通义灵码&#xff0c;说它效果很不错。我呢&#xff0c;一直没腾出时间折腾。 直到月中时&#xff0c;…...

Canvas Confetti - 免费开源的五彩纸屑飞舞特效的 JS 库,多用于在网页上实现欢乐庆祝的场景

今天看科技周刊看到的一个酷炫的动效库&#xff0c;使用简单&#xff0c;视觉效果很好&#xff0c;推荐给大家。 Canvas Confetti 是一个基于 JavaScript 的特效动画库&#xff0c;可以在网页界面上轻松地实现五彩纸屑飞舞的庆祝场景特效。这个特效库封装了几种酷炫的特效&…...

[数据集][目标检测]智慧牧场猪只检测数据集VOC+YOLO格式16245张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;16245 标注数量(xml文件个数)&#xff1a;16245 标注数量(txt文件个数)&#xff1a;16245 标…...

GS-SLAM论文阅读笔记--LoopSplat

介绍 这篇文章看标题是解决GS-SLAM回环检测的&#xff0c;GS-SLAM回环检测之前文章很少&#xff0c;但他对于SLAM又很重要&#xff0c;确实值得阅读一番。而且这些作者的学校又是很厉害的。 文章目录 介绍1.背景介绍2.关键内容2.1 Gaussian Splatting SLAM2.2 Gaussian Splat…...

Mysql数据库表结构迁移PostgreSQL

1、背景&#xff1a; 公司本来用的数据库都是mysql&#xff0c;为了国产化适配兼容pg和dm。dm提供了数据迁移工具&#xff0c;可以直接做数据迁移&#xff0c;生成脚本之后在其他环境执行。但是pg貌似没有工具能直接用。navicat由于版权问题公司也用不了。pgloader使用总是有问…...

店匠科技携手Stripe共谋电商支付新篇章

在全球电商行业蓬勃发展的背景下,支付环节作为交易闭环的核心,其重要性日益凸显。随着消费者对支付体验要求的不断提高,以及跨境电商的迅猛发展,支付市场正经历着前所未有的变革与挑战。在这一充满机遇与竞争的领域,店匠科技(Shoplazza)凭借其创新的嵌入式支付解决方案—— Sho…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...