Vue3 对跳转 同一路由传入不同参数的页面分别进行缓存
1:使用场景
从列表页跳转至不同的详情页面,对这些详情页面分别进行缓存
2:核心代码
2.1: 配置路由文件
在路由文件里对需要进行缓存的路由对象添加meta 属性
// 需要缓存的详情页面路由
{
name: detail,
path: '/myRouter/detail', // 路径
component: () => import('../views/abc/detail.vue'),
meta: {
keepAlive: true, // 是否被缓存
},
},
2.2: app页面增加缓存逻辑
<template>
<el-config-provider :locale="locale">
<!-- 有条件的进行缓存 -->
<transition mode="out-in" name="fade">
<router-view v-slot="{ Component }">
<keep-alive :include="includeList">
<component :is="wrap(route?.name , route.query, Component)" :key="route.fullPath" />
</keep-alive>
</router-view>
</transition>
</el-config-provider>
</template>
wrap 方法
const wrapperMap = new Map();const wrap = (name:any, query:any, component:any) => {let wrapper;let wrapperName;if(query.catchName){wrapperName = name + '-' + query.catchName;}else {wrapperName = name;}if (wrapperMap.has(wrapperName)) {wrapper = wrapperMap.get(wrapperName);} else {wrapper = {name: wrapperName,render() {return h('div', { className: 'vaf-page-wrapper' }, component);},};wrapperMap.set(wrapperName, wrapper);}return h(wrapper);};
watch 监听对于route.query 是否存在catchName 参数的路由分别进行缓存
// 监听路由,判断页面是否需要缓存watch(() => route,(newVal: any, oldVal) => {if (newVal.query?.catchName) {if (newVal.meta.keepAlive && !state.includeList.includes(newVal.name + '-' + newVal.query?.catchName)) {state.includeList.push(newVal.name + '-' + newVal.query?.catchName);}} else if (newVal.meta.keepAlive && !state.includeList.includes(newVal.name)) {state.includeList.push(newVal.name);}},{deep: true, // 开启深度监听},);
2.3: 在列表页面的查看点击方法中配置路由添加query 传参 catchName
注:上面为核心代码逻辑,需要根据实际情况进行调整。
相关文章:
Vue3 对跳转 同一路由传入不同参数的页面分别进行缓存
1:使用场景 从列表页跳转至不同的详情页面,对这些详情页面分别进行缓存 2:核心代码 2.1: 配置路由文件 在路由文件里对需要进行缓存的路由对象添加meta 属性 // 需要缓存的详情页面路由 { name: detail, path: /myRouter/detail…...
LinearLayout的测量流程
在日常开发中我们常常使用LinearLayout作为布局Group,本文从其源码实现出发分析测量流程。大家可以带着问题进入下面的分析流程,看看是否能找到答案。 垂直测量 View的测量入口方法是onmeasure方法。LinearLayout的onMeasure方法根据其方向而做不同的处…...
数据无忧:Ubuntu 系统迁移备份全指南
唠唠闲话 最近电脑出现了一些故障,送修期间,不得不在实验室的台式机上重装系统,配环境的过程花费了不少时间。为避免未来处理类似事情时耗费时间,特此整理一些备份策略。 先做以下准备: U盘启动盘,参考 …...
中国IDC圈探访北京•光子1号金融算力中心
今天,“AI”、“大模型”是最炙手可热的话题,全球有海量人群在工作生活中使用大模型,大模型产品涉及多模态,应用范围已涵盖电商、传媒、金融、短视频、制造等众多行业。 而回看2003年的互联网记忆, “上网”“在线”是…...
[Unity入门01] Unity基本操作
参考的傅老师的教程学了一下Unity的基础操作: [傅老師/Unity教學] Unity3D基礎入門 [華梵大學] 遊戲引擎應用基礎(Unity版本) Class#01 移动:鼠标中键旋转:鼠标右键放大:鼠标滚轮飞行模式:右键WASDQEFocus模式&…...
vivado DELAY_VALUE_XPHY、DIFF_TERM
延迟_值_XPHY PORT对象上的DELAY_VALUE_XPHY属性指定要添加的延迟量 Versal XPHY逻辑接口的输入或输出路径。在的早期阶段 opt_design在重新生成高级I/O向导IP时 DELAY_VALUE_XPHY值将从PORT复制到的XPHY实例上 输入或输出路径。Vivado设计套件中存在DRCs,以确保 DE…...
C++语言相关的常见面试题目(三)
1. List底层实现原理 省流: list底层实现了一个双向循环链表。 每个元素(或节点)包含三个部分:数据域(_M_Storage)、前驱指针(_M_prev)、后继指针(_M_next)。 数据域:存储实际数据。 前驱指针:指向链表中…...
代码随想录-Day53
739. 每日温度 给定一个整数数组 temperatures ,表示每天的温度,返回一个数组 answer ,其中 answer[i] 是指对于第 i 天,下一个更高温度出现在几天后。如果气温在这之后都不会升高,请在该位置用 0 来代替。 示例 1: …...
Android 如何通过代码实时设置EditTextView光标
背景:换肤框架下,QA进行深色浅色切换说输入框光标颜色没有改变,转UI结果UI说需要修改!!!!! 本来有方法可以设置,但是 设置后未生效。重新进入该页面才生效!&a…...
202488读书笔记|《365日创意文案》——无聊的 到底是这世间, 还是自己?懂得忘却的人才能前进
202488读书笔记|《365日创意文案》——无聊的 到底是这世间, 还是自己?懂得忘却的人才能前进 1月2月3月4月5月6月7月8月9月10月11月12月 《365日创意文案》WRITES PUBLISHING,一些日常,是烟火,也是幸福的印记。 当下也…...
iperf3: error - unable to connect to server: No route to host
1.确认iperf3版本是否统一。 2.确认防火墙是否关闭。 关闭防火墙 : systemctl stop firewalld 查看防火墙状态: systemctl status firewalld 3.重新建起链接...
正则表达式中的贪心匹配
在正则表达式中,?既可以表示数量,0次或1次,等效于 {0,1},也可以跟在其它数量限定符之后,表示非贪心匹配,即匹配时匹配搜索到的尽可能短的字符串。 下面来看一个例子: T…...
线程相关概念及操作
【1】线程的概念 1.线程-->进程会得到一个内存地址,进程是资源分配的基本单位线程才是真正进程里处理数据与逻辑的东西进程---》被分配一定的资源线程---》利用进程资源处理数据与逻辑 【2】进程和线程关系: 进程与进程之间是竞争关系,竞…...
2024最新版若依-RuoYi-Vue3-PostgreSQL前后端分离项目部署手册教程
项目简介: RuoYi-Vue3-PostgreSQL 是一个基于 RuoYi-Vue3 框架并集成 PostgreSQL 数据库的项目。该项目提供了一套高效的前后端分离的开发解决方案,适用于中小型企业快速构建现代化的企业级应用。此项目结合了 RuoYi-Vue-Postgresql 和 RuoYi-Vue3 的优点࿰…...
PHP源码:新闻门户系统(附管理后台+前台)
一. 前言 今天小编给大家带来了一款可学习,可商用的,新闻门户系统 源码,支持二开,无加密。项目可以扩展为个人博客,和一些社交论坛网址。主要功能:支持文章管理,评论管理,分类管理等…...
15kg级弹簧刀高速巡飞无人机技术详解
弹簧刀高速巡飞无人机,作为一种先进的战术导弹系统,融合了无人机与导弹的双重特性,成为了现代战争中不可或缺的侦察与打击利器。该无人机以其小巧的外形设计、优异的性能表现和广泛的适用领域,受到了全球军事领域的广泛关注。弹簧…...
中国东方资产管理25届秋招北森测评笔试如何高分通过?真题考点分析看完这篇就够了
一、东方资管校招测评题型分析 中国东方资产管理股份有限公司(中国东方资管)的校园招聘测评题型主要包括以下几个部分: 1. **计分题,行测知识**:这部分题量大约在56-57题左右,分为不同的模块进行计时测试。…...
简写单词BC149
BC149 简写单词 题目描述输入描述:输出描述: 题目描述 规定一种对于复合词的简写方式为只保留每个组成单词的首字母,并将首字母大写后再连接在一起 比如 “College English Test”可以简写成“CET”,“Computer Science”可以简写…...
Chapter11让画面动起来——Shader入门精要学习笔记
Chapter11让画面动起来 一、Unity Shader中的内置变量(时间篇)二、纹理动画1.序列帧动画2.滚动背景 三、顶点动画1.流动的河流2.广告牌3.注意事项①批处理问题②阴影投射问题 一、Unity Shader中的内置变量(时间篇) Unity Shader…...
c++之命名空间详解(namespace)
引例 在学习之前我们首先了来看这样一个情形: 在c语言下,我们写了两个头文件:链表和顺序表的。我们会定义一个type(typedef int type)方便改变数据类型(比如将int改成char),来做到整体代换。 但是我们两个头文件里面…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
Robots.txt 文件
什么是robots.txt? robots.txt 是一个位于网站根目录下的文本文件(如:https://example.com/robots.txt),它用于指导网络爬虫(如搜索引擎的蜘蛛程序)如何抓取该网站的内容。这个文件遵循 Robots…...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
