vue3中< keep-alive >页面实现缓存及遇到的问题

vue3中< keep-alive >页面实现缓存及遇到的问题

实现原理:keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。实现不同路由是否缓存只需要设置对应路由参数keepAlive为true,不需要缓存的路由设置false。如果是多级路由你要设置子路由缓存的话,它的父级路由的keepAlive也必须为true。

keep-alive的参数
参数原理
include它会根据组件的 name 选项进行匹配,所以组件如果想要条件性地被 KeepAlive 缓存,就必须显式声明一个 name 选项
exclude任何名称与 exclude 匹配的组件都不会被缓存
max最大缓存实例数
<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b"><component :is="view" />
</KeepAlive><!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/"><component :is="view" />
</KeepAlive><!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']"><component :is="view" />
</KeepAlive>
一:keep-alive设置缓存
<template><div id="app"><!--需要缓存的keep-alive配置 展示内容--><keep-alive :include="getKeepAliveNames"><router-view v-if="$route.meta.keepAlive" /></keep-alive><!--不需要缓存的keep-alive 配置 展示内容--><router-view v-if="!$route.meta.keepAlive" /></div>
</template>
二:router,多级router页面缓存
  //首页{path: "/home",name: "home",component: component: () => import("@/views/home/index.vue")//配置keep-alive 的状态  meta: {keepAlive: true, //需要缓存的页面,title:"首页"},},{path: "/user",name: "user",component:  component: () => import("@/views/user/index.vue"),//配置keep-alive 的状态  meta: {keepAlive: true, //需要缓存的页面title:"用户"},children:[{path: "/userOne",name: "userOne",component:  component: () => import("@/views/userOne/index.vue"),//配置keep-alive 的状态  meta: {keepAlive: true, //需要缓存的页面,title:"用户1"},},{path: "/userTwo",name: "userTwo",component:  component: () => import("@/views/userTwo/index.vue"),//配置keep-alive 的状态  meta: {keepAlive: true, //需要缓存的页面,title:"用户2"},},]},
三:查看页面是否缓存成功
1:查看 onActivated ,onDeactivated 判断 keepalive是否生效
<script setup>
import { onActivated, onDeactivated } from 'vue'onActivated(() => {// 调用时机为首次挂载// 以及每次从缓存中被重新插入时
})onDeactivated(() => {// 在从 DOM 上移除、进入缓存// 以及组件卸载时调用
})
</script>
2:使用vue插件判断缓存是否生效

在这里插入图片描述

四:遇到的问题

写了以上步骤缓存都失效,查看了原因:是因为keep-alive里面的名称和组件的名称没有匹配上。
解决办法是在组件页面给他命名,这样就解决了。

import { defineOptions} from 'vue';
defineOptions({ name: 'userRegister' })//与路由的name要一致

如果遇到defineOptions报错
更新vue和vue-router版本就行;我的版本是:"vue": "3.3.4","vue-router": "^4.0.12",然后再npm i安装一下再重启项目就可以了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/433904.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【周末推荐】替换SwitchyOmega的Chrome浏览器插件

SwitchyOmega插件在我们这个圈子里应该无人不知无人不晓了吧&#xff0c;最近有很多朋友反馈自己的SwitchyOmega不工作了&#xff0c;今天我们将聊聊为什么SwitchyOmega不工作了&#xff0c;并推荐2款实用的Chrome浏览器插件解决这个问题。 为什么要替换SwitchyOmega&#xff…

【有啥问啥】深度理解主动学习:机器学习的高效策略

深度理解主动学习&#xff1a;机器学习的高效策略 在大数据时代&#xff0c;数据量的爆炸性增长与有限的标注资源之间的矛盾日益凸显。如何高效地利用标注资源来训练高质量的模型&#xff0c;成为了机器学习领域亟待解决的问题。主动学习&#xff08;Active Learning, AL&…

Vmware VC登录报错:Vmware报错 HTTP状态 500 - 内部服务器错误

问题现象&#xff1a; 登录Vmware VC系统报错&#xff1a;Vmware报错 HTTP状态 500 - 内部服务器错误、 然后登录管理服务&#xff08;访问端口&#xff1a;5480&#xff09;重启一下异常服务&#xff0c;结果提示证书过期。 初步判断VC SSL证书到期 判定方法&#xff1a; 1…

基于微信小程序爱心领养小程序设计与实现(源码+定制+开发)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

C++编程基础:内联函数、auto关键字、基于范围的for循环和nullptr

内联函数 概念 以inline修饰的函数叫做内联函数,编译时C++编译器会在调用内联函数的地方展开,没有函数调用建立栈帧的开销,内联函数提升程序运行的效率。 如果在函数前增加inline关键字将其改成内联函数,在编译期间编译器会用函数体替换函数的调用。 特性 1.我们可以这…

深入浅出MySQL事务处理:从基础概念到ACID特性及并发控制

1、什么是事务 在实际的业务开发中&#xff0c;有些业务操作要多次访问数据库。一个业务要发送多条SQL语句给数据库执行。需要将多次访问数据库的操作视为一个整体来执行&#xff0c;要么所有的SQL语句全部执行成功。如果其中有一条SQL语句失败&#xff0c;就进行事务的回滚&a…

第五部分:5---三张信号表,信号表的系统调用

目录 信号的递达、未决、阻塞&#xff1a; 进程维护的三张信号表&#xff1a; 普通信号与实时信号的记录&#xff1a; 信号结构的系统调用&#xff1a; bolck表的系统调用&#xff1a; 实例&#xff1a;设置屏蔽信号集中的所有信号都频闭 pending表读取&#xff1a; 信号…

html TAB切换按钮变色、自动生成table

<!DOCTYPE html> <head> <meta charset"UTF-8"> <title>Dynamic Tabs with Table Data</title> <style> /* 简单的样式 */ .tab-content { display: none; border: 1px solid #ccc; padding: 1px; marg…

OFDM通信系统发射端需要做ifftshift的原因分析

对频率为15Hz的正弦波信号进行FFT分析&#xff0c;并且直接画图&#xff0c;matlab代码如下&#xff1a; fs 100; % sampling frequency t 0:(1/fs):(10-1/fs); % time vector S cos(2*pi*15*t); n length(S); X fft(S); f (0:n-1)*(fs/n); %frequenc…

Django 数据库配置以及字段设置详解

配置PostGre 要在 Django 中配置连接 PostgreSQL 数据库&#xff0c;并创建一个包含“使用人”和“车牌号”等字段的 Car 表 1. 配置 PostgreSQL 数据库连接 首先&#xff0c;在 Django 项目的 settings.py 中配置 PostgreSQL 连接。 修改 settings.py 文件&#xff1a; …

使用ffmpeg合并视频和音频

使用ffmpeg合并视频和音频 - 哔哩哔哩 简介 FFmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec&#xff0…

vue3+ts不能将类型“Timeout”分配给类型“null”不能将类型“Timeout”分配给类型number

在设置有setTimeout() 函数时&#xff0c;一般是需要进行清除计时器操作的&#xff1b; 常用的做法是定义一个全局变量timer&#xff0c;在onMounted或者有需要的地方进行赋值&#xff0c;在onBeforeUnmount进行clear&#xff0c;一般在定义timer变量时&#xff0c;使用 numbe…

接档《凡人修仙传》的《牧神记》动画,能否成为黑马?

堪称B站国创半边天的《凡人修仙传》第三季将在10月19日迎来完结&#xff0c;接档它的是由玄机科技制作&#xff0c;改编自宅猪同名网络小说的《牧神记》。这部将于10月27日播出的“玄机娘娘新崽”&#xff0c;能否成功接下《凡人修仙传》的好彩头&#xff0c;成为国漫界下一匹黑…

Metasploit渗透测试之服务端漏洞利用

简介 在之前的文章中&#xff0c;我们学习了目标的IP地址&#xff0c;端口&#xff0c;服务&#xff0c;操作系统等信息的收集。信息收集过程中最大的收获是服务器或系统的操作系统信息。这些信息对后续的渗透目标机器非常有用&#xff0c;因为我们可以快速查找系统上运行的服…

计算机视觉综述

大家好&#xff0c;今天&#xff0c;我们将一起探讨计算机视觉的基本概念、发展历程、关键技术以及未来趋势。计算机视觉是人工智能的一个重要分支&#xff0c;旨在使计算机能够“看”懂图像和视频&#xff0c;从而完成各种复杂的任务。无论你是对这个领域感兴趣的新手&#xf…

HarmonyOS故障恢复实践

一、应用恢复框架 异常感知机制&#xff0c;实时通知应用&#xff1b; 统一保存和恢复机制&#xff0c;降低门槛&#xff1b; 重启恢复&#xff0c;保证恢复结果。 二、API全集 三、应用异常恢复实例 全面的异常检测机制&#xff0c;开放完善ability数据保存接口。当应用异常时…

Java并发:互斥锁,读写锁,公平锁,Condition,StampedLock

阅读本文之前可以看一看 Java 多线程基础&#xff1a; Java&#xff1a;多线程&#xff08;进程线程&#xff0c;线程状态&#xff0c;创建线程&#xff0c;线程操作&#xff09; Java&#xff1a;多线程&#xff08;同步死锁&#xff0c;锁&原子变量&#xff0c;线程通信&…

Flask学习之项目搭建

一、项目基本结构 1、 exts.py 存在的目的&#xff1a;在Python中&#xff0c;如果两个或更多模块(文件)相互导入对方&#xff0c;就会形成导入循环。例如&#xff0c;模块A导入了模块B&#xff0c;同时模块B又导入了模块A&#xff0c;这就会导致导入循环。 比如在这个项目中…

[数据结构] 二叉树题目(一)

目录 一.翻转二叉树 1.1 题目 1.2 示例 1.3 分析 1.4 解决 ​编辑 二. 相同的树 2.1 题目 2.2 示例 2.3 分析 2.4 解决 三. 对称二叉树 3.1 题目 3.2 示例 3.3 分析 3.4 解决 一.翻转二叉树. - 力扣&#xff08;LeetCode&#xff09; 1.1 题目 1.2 示例 1.3 分…

Android Glide(一):源码分析,内存缓存和磁盘缓存的分析,实现流程以及生命周期

目录 一、Android Glide是什么&#xff0c;如何使用&#xff1f; Android Glide是一个由Google维护的快速高效的Android图像加载库&#xff0c;它旨在简化在Android应用程序中加载和显示图像的过程&#xff0c;包括内存缓存、磁盘缓存和网络加载&#xff0c;以确保图像加载的快…