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.mzph.cn/pingmian/55064.shtml

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

相关文章

Spring Boot 实现动态配置导出,同时支持公式和动态下拉框渲染和性能优化案例示范

在业务系统中&#xff0c;数据导出是一个非常常见且重要的功能&#xff0c;本文将详细介绍如何在 Spring Boot 中实现这一功能&#xff0c;并结合 MySQL 数据库、MyBatis 作为数据访问层&#xff0c;EasyExcel 作为导出工具&#xff0c;展示如何在电商交易系统中搭建灵活、可扩…

BUG项目管理

最近只要改项目就有可能产生bug。 目前这项目&#xff0c;从一开始我就参与开发。 很长一段时间都是敏捷开发&#xff0c;有时候连UI图都是后出。 随着时间加长&#xff0c;需求复杂度增加&#xff0c;有时候动下代码就伤筋动骨&#xff0c;事故不断&#xff0c;主要是影响口…

64.【C语言】再议结构体(下)

本文衔接第63篇63.【C语言】再议结构体(上) 目录 目录 6.复习 7.修改默认对齐数 8.结构体传参 01.传递非指针参数 02.传递指针参数(传递地址) 03.对比 9.结构体实现位段 01.位段的定义 02.格式 03.例题 答案速查 分析 10.位段跨平台问题 11.位段的应用 12.其他…

scrapy 爬取微博(五)【最新超详细解析】: 爬取微博文章

1 读取配置参数 爬取微博文章首先需要读取settings.py中的设置的配置变量&#xff0c;然后编写爬虫&#xff0c;读取的配置变量主要有爬取的关键词、时间范围、爬取区域等。 class WeiboSearchSpider(scrapy.Spider):name weibo_searchallowed_domains [weibo.com]settings…

完成UI界面的绘制

绘制UI 接上文&#xff0c;在Order90Canvas下创建Image子物体&#xff0c;图片资源ui_fish_lv1&#xff0c;设置锚点&#xff08;CountdownPanelImg同理&#xff09;&#xff0c;命名为LvPanelImg,创建Text子物体&#xff0c;边框宽高各50&#xff0c; &#xff0c;重名为LvT…

影刀---如何进行自动化操作

本文不是广告&#xff0c;没有人给我宣传费&#xff0c;只是单纯的觉得这个软件很好用 感谢大家的多多支持哦 本文 1.基本概念与操作&#xff08;非标准下拉框和上传下载&#xff09;非标准对话框的操作上传对话框、下载的对话框、提示的对话框 2.综合案例3.找不到元素怎么办&a…

css 中 ~ 符号、text-indent、ellipsis、ellipsis-2、text-overflow: ellipsis、::before的使用

1、~的使用直接看代码 <script setup> </script><template><div class"container"><p><a href"javascript:;">纪检委</a><a href"javascript:;">中介为</a><a href"javascript:…

Web APIs 5:Window对象(BOM)+本地存储

Web APIs 5&#xff08;BOM&#xff1a;Window对象本地存储&#xff09; 1.BOM(浏览器对象模型)&#xff08;后面几个对象都为BOM对象&#xff09; BOM对象包含&#xff1a;navigator、location、document(DOM对象)、history、screenBOM是一个全局对象&#xff0c;即JS中的顶…

架构师:消息队列的技术指南

1、简述 消息队列(Message Queue, MQ)是一种异步通信机制,允许系统的各个组件通过消息在彼此之间进行通信。消息队列通过解耦系统组件、缓冲高峰期请求和提高系统的可扩展性,成为分布式系统中不可或缺的一部分。 2、工作原理 消息队列的基本工作原理是生产者将消息发布到…

centos7.9使用docker容器方式部署jenkins环境

文章目录 前言一、版本信息二、环境准备2.1 切换源2.2 安装docker2.3 安装ntp2.4 关闭selinux2.5 安装docker-compose 三、jenkins安装3.1 镜像准备3.2 maven环境安装3.3 jdk环境安装3.4 nodejs环境安装3.5 yaml文件准备3.6 进行启动3.7 查看密码 总结 前言 记录在centos7.6安…

python爬虫案例——抓取链家租房信息(8)

文章目录 1、任务目标2、分析网页3、编写代码1、任务目标 目标站点:链家租房版块(https://bj.lianjia.com/zufang/) 要求:抓取该链接下前5页所有的租房信息,包括:标题、详情信息、详情链接、价格 如: 2、分析网页 用浏览器打开链接,按F12或右键检查,进入开发者模式;因…

Axure-本地发布,局域网内用户访问

目录 前言内容一. 选择Axure发布路径&#xff0c;进行相应配置二.添加IIS服务配置&#xff08;不在这里赘述&#xff01;&#xff09;三&#xff1a;添加IIS配置&#xff0c;创建网站四.添加安全策略&#xff1a;实践&#xff1a; 前言 最近加入了公司的积分系统&#xff0c;由…

React跨平台

React的跨平台应用开发详解如下&#xff1a; 一、跨平台能力 React本身是一个用于构建用户界面的JavaScript库&#xff0c;但它通过React Native等框架实现了跨平台应用开发的能力。React Native允许开发者使用JavaScript和React来编写原生应用&#xff0c;这些应用可以在iOS和…

Draco技术解析之优化3D模型加载的利器

一、概述 1. 什么是Draco&#xff1f; Draco是由Google开发的开源库&#xff0c;专门用于3D数据的压缩&#xff0c;特别是网格和点云数据。其设计旨在显著减小3D模型的文件大小&#xff0c;从而加快加载速度和降低带宽需求&#xff0c;使得3D内容在Web和移动应用中更加流畅和…

Qt网络编程——QUdpSocket

文章目录 Qt网络编程QUdpSocketUdp回显服务器Udp客户端 Qt网络编程 网络编程本质上是写应用层代码&#xff0c;需要传输层提供支持。 而传输层最核心的协议就是UDP和TCP&#xff0c;这两个协议有较大差别&#xff0c;所以Qt提供了两套API。 要是有Qt网络编程的API&#xff0…

【CSS Tricks】css动画详解

目录 引言一、动画关键帧序列二、动画各属性拆解1. animation-name2. animation-duration3. animation-delay3.1 设置delay为正值3.2 设置delay为负值 4. animation-direction5. animation-iteration-count6. animation-fill-mode7. animation-play-state8. animation-timing-f…

Kubernetes云原生存储解决方案之 Rook Ceph实践探究

Kubernetes云原生存储解决方案之 Rook Ceph实践探究 除了手动部署独立的 Ceph 集群并配置与Kubernetes进行对接外&#xff0c;Rook Ceph 支持直接在 Kubernetes 集群上部署 Ceph 集群。 通过Rook Ceph云原生存储编排平台&#xff0c;使得 Kubernetes 集群中启用高可用的 Ceph…

RabbitMQ常用管理命令及管理后台

RabbitMQ管理命令 1、用户管理1.1、新增一个用户1.2、查看当前用户列表1.3、设置用户角色1.4、设置用户权限1.5、查看用户权限 2、RabbitMQ的web管理后台2.1、查看rabbitmq 的插件列表2.2、启用插件2.3、禁用插件2.4、访问RabbitMQ的web后台2.4、通过web页面新建虚拟主机 ./rab…

16 数组——18. 四数之和 ★★

18. 四数之和 给你一个由n个整数组成的数组nums,和一个目标值target。请你找出并返回满足下述全部条件且不重复的四元组[nums[a], nums[b], nums[c], nums[d]](若两个四元组元素一一对应,则认为两个四元组重复):0 <= a, b, c, d < n,a、b、c和d互不相同。满足nums…

【计算机网络】详解HTTP请求和响应格式常见请求方法Header报头响应报文状态码URL

一、HTTP协议的定义 在互联网世界中&#xff0c;HTTP &#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是一个至关重要的协议。它定义了客户端&#xff08;如浏览器&#xff09;与服务器之间如何通信&#xff0c;以交换或传输超文本&#xff08…