当前位置: 首页 > 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…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

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

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

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...