全网最细!Vue3实现路由缓存~

1、设置缓存对应的数据

  1. 需要在全局状态管理中,或者当前组件中添加数据(本次演示在全局状态管理中,使用的是 pinia)

    const coreStore = defineStore('coreStore', {state () {return {// 缓存页面路由数组及组件cacheRoutes: [],includeComs: [],cacheComs: new Map()}},actions: {setCacheRoute (route: { fullPath: string, name: string }): void {this.cacheRoutes.push(route)}},
    })
    
  2. 在根组件 App.vue 中引入进来

    const store = costore();
    const { cacheRoutes, includeComs, cacheComs } = store
    

2、路由生命周期设置

在 App.vue 组件中,需要设置路由进入前的守卫函数,用于将对应组件进行缓存:

import { useRoute, useRouter } from "vue-router";const route = useRoute();
const router = useRouter();router.beforeEach((to, from, next) => {// 1 判断内部是否已有改缓存页面const bol = cacheRoutes.some(v => v.fullPath === to.fullPath)// 2 如果不存在,则存进缓存标签数组中!bol && cacheRoutes.push({ fullPath: to.fullPath, name: to.meta.title })// 3 缓存组件对应的路由名称!includeComs.includes(to.fullPath) && includeComs.push(to.fullPath);next()
})

3、将路由组件进行缓存

这个是 Vue3 的写法,不适用与 Vue2

<router-view v-slot="{ Component }"><keep-alive :include="includeComs" style="margin-left: 16px;"><component :is="formatComponentInstance(Component, $route)" :key="$route.fullPath" /></keep-alive>
</router-view>

4、formatComponentInstance

这是最重要的一个函数,因为缓存组件的时候 keep-alive 会根据组件名称进行缓存,假设现在有个 A.vue 组件(名称为 A,如果不使用选项式写法,Vue3默认将组件名称作为组件的 name)

在访问 A?a=1A?a=2 两个路径的时候,会导致访问的都是已缓存的组件,不会重新进行挂载渲染

因此需要该函数保证不同路径下,即使组件相同,也能进行重新挂载和缓存

import { compile, h, nextTick, onMounted, ref, watch } from "vue";// 显示组件时,替换组件 name,解决同个组件路由不一致问题
const formatComponentInstance = (component, route) => {let wrapper;if (component) {const wrapperName = route.fullPathif (cacheComs.has(wrapperName)) {wrapper = cacheComs.get(wrapperName);} else {wrapper = {name: wrapperName,render() {return h(component);},}cacheComs.set(wrapperName, wrapper);}}return h(wrapper);
}

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

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

相关文章

2018年4月26日 Go生态洞察:Go新品牌形象及标识发布

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

从代码执行,看单片机内存的分配

1、单片机执行指令过程详解 单片机执行程序的过程&#xff0c;实际上就是执行我们所编制程序的过程。即逐条指令的过程。计算机每执行一条指令都可分为三个阶段进行&#xff0c;即取指令--分析指令--执行指令。 取指令的任务是&#xff1a;根据程序计数器PC中的值从程序存储器读…

C语言基础介绍

1. C语言基础知识 C语言是一种计算机编程语言&#xff0c;是一门用于编写系统软件和应用软件的高级语言。C语言的基础知识包括&#xff1a; 数据类型&#xff1a;C语言中的数据类型包括整型、浮点型、字符型等。 变量&#xff1a;C语言中使用变量来存储数据&#xff0c;变量必…

Spring RabbitMQ那些事(2-两种方式实现延时消息订阅)

目录 一、序言二、死信交换机和消息TTL实现延迟消息1、死信队列介绍2、代码示例(1) 死信交换机配置(2) 消息生产者(3) 消息消费者 3、测试用例 三、延迟消息交换机实现延迟消息1、安装延时消息插件2、代码示例(1) 延时消息交换机配置(2) 消息生产者(3) 消息消费者 3、测试用例 …

python类的伪私有属性__X

1 python类的伪私有属性__X python类的伪私有属性&#xff0c;是为了避免实例内的命名空间冲突。 1.1 变量名压缩__X &#xff08;1&#xff09;描述&#xff1a;python的class语句内&#xff0c;开头有两个下划线&#xff0c;但结尾没有两个下划线的变量名&#xff0c;会自…

[Linux]进程创建➕进程终止

文章目录 1.再谈fork()函数1.1fork()创建子进程 OS都做了哪些工作?1.2对上述问题的理解1.3写时拷贝进行父子进程分离的优势1.4了解eip寄存器和pc1.5了解进程的上下文数据1.6对计算机组成的理解1.7fork常规用法1.8fork调用失败的原因 2.进程终止2.1进程终止时操作系统要做的工作…

输入一个数n,输出大写字母X c++ 描述 用例输入 1 4 用例输出 1 d d c c b b a b b c c d d

输入一个数n&#xff0c;输出大写字母X c 描述 用例输入 1 4 用例输出 1 d d c c b b a b b c c d d 以下是使用C编写的输出大写字母X的程序&#xff1a; #include <iostream> #include <cmath> int main() {int n;std::cout << "请输入一个数n&…

人工智能-注意力机制之Transformer

Transformer 比较了卷积神经网络&#xff08;CNN&#xff09;、循环神经网络&#xff08;RNN&#xff09;和自注意力&#xff08;self-attention&#xff09;。值得注意的是&#xff0c;自注意力同时具有并行计算和最短的最大路径长度这两个优势。因此&#xff0c;使用自注意力…

13年老鸟总结,性能测试方法汇总+性能响应很慢排查方法(详全)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、性能测试包含哪…

windows的bat文件(学习笔记)

简介 通过windows的cmd执行的批处理&#xff0c;扩展名可以是.bat或.cmd&#xff08;类似linux的shell脚本&#xff09; 所有语句符号不区分大小写 帮助提示信息&#xff1a;命令 /? 1 基本语法 (1) 注释&#xff1a;rem 注释文本不执行 (2) 关闭盘符输出&#xff1a;e…

Java实现-数据结构 2.时间和空间复杂度

.如何衡量一个算法的好坏&#xff1a;时间复杂度和空间复杂度 算法效率分为时间效率和空间效率&#xff0c;时间效率称为时间复杂度&#xff0c;空间效率称为空间复杂度 时间复杂度 算法的时间复杂度是一个数学函数&#xff0c;它描述了算法的运行时间&#xff0c;一个算法执…

读书笔记:《宽客人生:依曼纽尔·德曼》

金融工程&#xff0c;也叫数量金融&#xff0c;洞察了证券价值与不确定性之间的关系。 布莱克-斯科尔斯模型可以告诉我们如何利用标的股票来复制期权&#xff0c;以及复制期权的成本&#xff0c;做市商利用此来复制期权&#xff0c;以规避无法从其他人那里购买合适价格的期权的…

vim+xxd编辑十六进制的一个大坑:自动添加0x0a

问题描述 今天在做一个ctf题&#xff0c;它给了一个elf文件&#xff0c;我要做的事情是修复这个elf文件&#xff0c;最后执行它&#xff0c;这个可执行文件会计算它自身的md5作为这道题的flag。我把所有需要修复的地方都修复了&#xff0c;程序也能成功运行&#xff0c;但是fl…

奇怪的问题 a==1 a==2 a==3

a 1 && a 2 && a 3 题目很简单&#xff0c;只要让if语句中的判断条件成立即可。 if (a 1 && a 2 && a 3) {console.log(win!!!); }首先分析题目&#xff0c;题目的意思只要我们能够让a同时与1,2,3相等的话&#xff0c;那么此时就成功了…

【电路笔记】-快速了电阻

电阻类型 文章目录 电阻类型1、概述2、电阻器的组成类型2.1 碳电阻器2.2 薄膜电阻器2.3 绕线电阻器 3、总结 电阻器是所有电子元件中最基本、最常用的元件&#xff0c;人们几乎认为电阻器是理所当然的&#xff0c;但它们在电路中起着至关重要的作用。 1、概述 有许多不同类型的…

SpringCloud之Gateway(统一网关)

文章目录 前言一、搭建网关服务1、导入依赖2、在application.yml中写配置 二、路由断言工厂Route Predicate Factory三、路由过滤器 GatewayFilter案例1给所有进入userservice的请求添加一个请求头总结 四、全局过滤器 GlobalFilter定义全局过滤器&#xff0c;拦截并判断用户身…

深入解析:如何开发抖音票务小程序

当下&#xff0c;开发抖音票务小程序成为了吸引年轻用户群体的一种创新方式。本文将深入解析如何开发抖音票务小程序&#xff0c;探讨关键步骤和技术要点。 1.确定需求和功能 考虑到抖音的用户特点&#xff0c;可以加入与短视频相关的票务功能&#xff0c;如在线购票、观影记录…

[网络] 3. HTTP 3 与 HTTP 2 有什么区别

协议不同 HTTP2 是基于 TCP 协议实现的 HTTP3 是基于 UDP 协议实现的QUIC HTTP3 新增了 QUIC 协议来实现可靠性的传输握手次数 HTTP2 是基于 HTTPS 实现的&#xff0c;建立连接需要先进行 TCP 3次握手&#xff0c;然后再进行 TLS 3次握手&#xff0c;总共6次握手。 HTTP3 只需要…

IDEA中的Postman?完全免费!

Postman是大家最常用的API调试工具&#xff0c;那么有没有一种方法可以不用手动写入接口到Postman&#xff0c;即可进行接口调试操作&#xff1f;今天给大家推荐一款IDEA插件&#xff1a;Apipost Helper&#xff0c;写完代码就可以调试接口并一键生成接口文档&#xff01;而且还…

Jenkins用126邮箱发邮件为什么发不出去

1、检查 Jenkins Location中的邮件地址配置与发邮件的地址配置是否一致 Manage Jenkins -》 system 2、检查地址和端口号 3、检查邮箱的登录配置是否正确&#xff08;这个地方的配置方式网上一抓一大把&#xff0c;自己搜一下就好&#xff09; 4、126邮箱发邮件不需要勾选ssl协…