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

vue,vue3 keepalive没有效果,无法缓存页面include无效,keep-alive

keepalive没有效果,无法缓存页面?

问题大概是组件的name值不对应,vue2修改组件文件的name值,vue3保持组件文件名称和路由页面配置的name一致就可以了,如果vue3不想保持一致,必须手动在文件后面添加export...如下。

vue3不修改文件名称,但实现效果:

核心代码和全部代码:

<script>
export default {name: 'ppidPage'
}
</script>
<template><PpidConfig />
</template>
<script setup>
import { onMounted } from 'vue'
import PpidConfig from './PpidConfig.vue'
import { usePpidStore } from '@/store/operation/ppid.js'
const ppidStore = usePpidStore()
onMounted(async () => {await ppidStore.getAllUnits()
})
</script>
<script>
export default {name: 'ppidPage'
}
</script>

keepalive文件:

<template><section class="app-main"><router-view v-slot="{ Component }"><transition name="fade-transform" mode="out-in"><keep-alive :include="cachedViews"><component :is="Component" :key="key" /></keep-alive></transition></router-view></section>
</template><script setup>
import { computed } from 'vue'
import { useTagsViewStore } from '@/store/tagsView'
import { useRoute } from 'vue-router';
const route = useRoute();
const tagsViewStore = useTagsViewStore()// 缓存的路由组件名称列表
const cachedViews = computed(() => {console.log('当前缓存页面:', tagsViewStore.cachedViews)// return tagsViewStore.cachedViewsreturn tagsViewStore.cachedViews.filter(item => {if (route.name == item && !route.meta.keepAlive) {  //keepAlive为false不缓存return false;} else {return true;}})
})
</script><style scoped></style>

router.js页面配置:

{path: 'ppid-config',permission: 'Operation.PPID',component: () => import('@/views/operation/ppid/ppidPage.vue'),name: 'ppidPage',meta: {title: t('route.operation.ppidConfig'),keepAlive: true}},

vue3 setup组件的name值无法修改,最终的name值会跟文件名称生成一致的。

vue2中可以动态修改组件name值,如下位置:

<script lang="ts">
export default {name: 'User',    //修改组件的name值data(){return {}}
}
</script>

vue官网文档说明:

其他

存在transition组件的写法:

<router-view v-slot="{ Component }" v-show="$route.meta.keepAlive"><transition name="fade-transform" mode="out-in"><keep-alive :include="cachedViews"><component :is="Component" :key="key" /></keep-alive></transition></router-view><router-view v-slot="{ Component }" v-if="!$route.meta.keepAlive"><transition name="fade-transform" mode="out-in"><component :is="Component" :key="key" /></transition></router-view>

相关链接:

https://cn.vuejs.org/guide/built-ins/keep-alive.html

vue3 keep-alive include失效问题_<router-view> <template #default="{ component, rou-CSDN博客

相关文章:

vue,vue3 keepalive没有效果,无法缓存页面include无效,keep-alive

keepalive没有效果&#xff0c;无法缓存页面&#xff1f; 问题大概是组件的name值不对应&#xff0c;vue2修改组件文件的name值&#xff0c;vue3保持组件文件名称和路由页面配置的name一致就可以了&#xff0c;如果vue3不想保持一致&#xff0c;必须手动在文件后面添加export..…...

Windows逆向工程入门之指针类型

公开视频 -> 链接点击跳转公开课程博客首页 -> ​​​链接点击跳转博客主页 目录 1. 指针特性 1.1 指针的优点 1.2 指针的缺点 2. 智能指针 2.1 智能指针的优点 2.2 智能指针的缺点 3. 指针的安全攻防 3.1 指针使用 3.2 指针运算 3.3 指针引用 3.4 参数传递 …...

PHP+Apache+MySQL安装(Windows)

一、安装教程 参考链接1 参考链接2 二、问题描述 PHP安装目录下找不到php8apache2_4.dll PHP安装包下载错误 Apache Service Monitor: request operation has failed! 定位问题&#xff1a; 查看【事件查看器】 解决问题 安装或更新与PHP版本相对应的Visual C Redistribu…...

算法基础 -- 堆排序之C语言实现

C语言实现堆排序&#xff08;Heap Sort&#xff09; 1. 代码实现 下面是 C语言实现的堆排序接口&#xff0c;支持 通用数据类型排序&#xff0c;并采用 函数指针 进行 自定义比较&#xff0c;适用于 整数排序 或 结构体排序。 完整代码 大根堆 #include <stdio.h> #…...

Hutool - Extra:功能丰富的扩展模块

一、简介 Hutool - Extra 作为 Hutool 工具包的扩展模块&#xff0c;对众多第三方库和功能进行了封装&#xff0c;极大地丰富了 Hutool 的功能体系。它涵盖了模板引擎、邮件发送、Servlet 处理、二维码生成、Emoji 处理、FTP 操作以及分词等多个方面&#xff0c;为开发者在不同…...

C++ 中的继承详解(上)

目录 1、继承的概念及定义 1.1、继承的概念 1.2、继承定义 1.2.1、定义格式 1.2.2、继承方式 1.2.3、继承基类成员访问方式的变化 2、基类和派生类对象赋值转换 3、继承中的作用域 4、派生类的默认成员函数 补充&#xff1a;封装的层次(实际上有很多层的&#xff0c;这…...

halcon三维点云数据处理(二十五)moments_object_model_3d

目录 一、moments_object_model_3d例程二、moments_object_model_3d函数三、效果图 一、moments_object_model_3d例程 这个例子说明了如何使用moments_object_model_3d运算符来将3D数据与x、y、z坐标轴对齐。在实际应用中&#xff0c;通过3D传感器获取的物体模型可能具有一个与…...

Mac M3/M4 本地部署Deepseek并集成vscode

Mac 部署 使用傻瓜集成平台ollama&#xff0c;ollama平台依赖于docker&#xff0c;Mac的M3/M4 因doesn’t have VT-X/AMD-v enabled 所以VB,VM无法使用&#xff0c;导致docker无法启动&#xff0c;需要使用docker的替代品podman&#xff0c; 它完全兼容docker brew install p…...

2024年职高单招或高考计算机类投档线

问题&#xff1a; 这些学校2024年职高单招或高考计算机类投档线分别是多少 回答&#xff1a; 部分学校2024年职高单招或高考计算机类投档线如下&#xff1a; 湖南工业职业技术学院 职高单招&#xff1a;未查询到2024年职高单招计算机类专业明确的录取分数线信息。但在2024年…...

Unity Excel导表工具转Lua文件

思路介绍 借助EPPlus读取Excel文件中的配置数据&#xff0c;根据指定的不同类型的数据配置规则来解析成对应的代码文本&#xff0c;将解析出的字符串内容写入到XXX.lua.txt文件中即可 EPPlus常用API //命名空间 using OfficeOpenXml;//Excel文件路径 var fileExcel new File…...

SpringBoot项目集成MinIO

最近在学习MinIO&#xff0c;所以想让自己的SpringBoot项目集成MinIO,在网上查阅资料&#xff0c;并进行操作的过程中遇到一些问题&#xff0c;所以想把自己遇到的坑和完成步骤记录下来供自己和各位查阅。 一. MinIO的下载安装以及基本使用 1. 下载地址&#xff1a;https://d…...

第30篇 基于ARM A9处理器用C语言实现中断<六>

Q&#xff1a;怎样设计基于ARM A9处理器的C语言程序在数码管上滚动显示字符&#xff1f; A&#xff1a;使用A9 Private Timer中断源&#xff0c;控制字符滚动的速度&#xff1b;按键产生中断可以控制字符暂停/继续滚动。 本实验在DE1-SoC开发板的6个七段数码管*HEX5~HEX0*上…...

Flutter 中的单例模式

传统&#xff1a; class RouterManager {// 单例模式static final RouterManager _instance RouterManager._internal();factory RouterManager() {return _instance;}RouterManager._internal(); }传递参数进行初始化时&#xff1a; class RouterManager {// 私有静态实例&a…...

8.python文件

文章目录 1.**文件**1.1**文件是什么**1.2**文件路径**1.3**文件操作**1.3.1**打开文件**1.3.2**关闭文件**1.3.3**写文件**1.3.4**读文件** 1.4**关于中文的处理**1.5**使用上下文管理器** 大家好&#xff0c;我是晓星航。今天为大家带来的是 python文件 相关的讲解&#xff0…...

2025vue4.x全栈学习关键技术分析线路图

关键升级点说明‌&#xff1a; ‌编译优化‌ &#xff1a;Vue 4.x采用WASM编译提速300% ‌智能工具链‌ &#xff1a;Vite插件市场新增AI代码审查模块 ‌跨平台能力‌ &#xff1a;Uni-App支持原生ARCore/ARKit调用 ‌安全增强‌ &#xff1a;默认启用WebAuthn生物认证…...

革新之力:数字科技——重塑未来的超越想象之旅

在21世纪的科技浪潮中&#xff0c;数字科技如同一股不可阻挡的洪流&#xff0c;正以前所未有的速度和广度改变着我们的生活、工作乃至整个社会的结构。它不仅是技术的简单迭代&#xff0c;更是对人类社会认知边界的拓宽&#xff0c;对经济模式、社会治理、文化形态等多方面的深…...

超级详细,知识图谱系统的理论详解+部署过程

知识图谱系统(Knowledge Graph System)是一种用于表示、存储、查询和推理知识的系统。它通过结构化的方式将现实世界中的实体、概念及其相互关系组织成一个图结构,从而帮助机器理解和处理复杂的知识。 知识图谱的核心组成部分 实体(Entities): 实体是知识图谱中的节点,…...

电路笔记 (信号): opa tips 放大器反馈电阻并联电容抑制高频噪声的详细推导(传递函数分析)

1. 高频噪声传递函数分析 &#xff08;1&#xff09;电路结构 输入信号通过 R 1 R_1 R1​ 和 C NI C_{\text{NI}} CNI​ 的并联组合连接到运放的同相输入端。反馈电阻 R 2 R_2 R2​ 连接在运放的输出端和反相输入端之间。 Layer 1 - 30p R2 R1 R3R1//R2 IN OUT 反向放大电…...

DeepSeek安装部署笔记(一)

Ollamaopen-WebUI部署 DeepSeek安装部署笔记第一步 Ollama安装1.安装ollama&#xff1a;官网https://ollama.com/下载2.上面安装完成&#xff0c;在cmd命令行&#xff1a; 第二步 给DeepSeek添加OpenWebUI界面&#xff08;重点&#xff09;1.安装conda&#xff1a;用它来管理py…...

【JavaEE进阶】Spring MVC(4)-图书管理系统案例

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗 如有错误&#xff0c;欢迎指出~ 图书管理系统 创建书籍类BookInfo import lombok.Data;import java.math.BigDecimal;Data //这个类基本上是和数据库对应起来的 public class BookInfo {private Integer id…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

大数据治理的常见方式

大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法&#xff0c;以下是几种常见的治理方式&#xff1a; 1. 数据质量管理 核心方法&#xff1a; 数据校验&#xff1a;建立数据校验规则&#xff08;格式、范围、一致性等&#xff09;数据清洗&…...

五、jmeter脚本参数化

目录 1、脚本参数化 1.1 用户定义的变量 1.1.1 添加及引用方式 1.1.2 测试得出用户定义变量的特点 1.2 用户参数 1.2.1 概念 1.2.2 位置不同效果不同 1.2.3、用户参数的勾选框 - 每次迭代更新一次 总结用户定义的变量、用户参数 1.3 csv数据文件参数化 1、脚本参数化 …...