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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...