vue中路由缓存

embedded/2024/11/22 20:21:50/

vue中路由缓存

  • 问题描述及截图
  • 解决思路
  • 关键代码及打印信息截图

问题描述及截图

在使用某一平台时发现当列表页码切换后点击某一卡片进入详情页后,再返回列表页时页面刷新了。这样用户每次看完详情回到列表页都得再重新输入自己的查询条件,或者切换分页到目标数据页等,操作起来非常闹心。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

解决思路

在原有路由面包屑处理基础上,过滤路由数据与vue文件中的name一致后即可通过keep-alive组件的include属性缓存匹配到的路由。

关键代码及打印信息截图

修改文件:src\components\Layout\BasicLayoutPage.vue<template><!-- 其他代码省略 --><router-view v-slot="{ Component }"><keep-alive :include="cachedRoutes"><component :is="components || Component" /></keep-alive></router-view>
</template><script setup lang="ts" name="BasicLayoutPage">
/*** cachedRoutes当前需要缓存的路由*/
let cachedRoutes = ref<Record<string, any>>({});
/*** 面包屑处理*/
const breadcrumbs = computed(() => {const paths = router.currentRoute.value.matched;let tempPaths = paths.map((item, index) => {return {index,isLast: index === paths.length - 1,path: item.path,breadcrumbName: (item.meta as any).title || '',};});console.log('tempPaths:', tempPaths);// 下面是处理要缓存的路由cachedRoutes.value = tempPaths.map((breadcrumb) =>breadcrumb.path.split('/').pop(), // 获取path中最后一个/后的值);console.log('cachedRoutes.value:', cachedRoutes.value);return tempPaths;
});
</script>

在这里插入图片描述

开发踩坑记,希望可以帮到正在解决该问题的你。若有侵权,联系立删。


http://www.ppmy.cn/embedded/139697.html

相关文章

【linux】插入新硬盘如何配置:格式化、分区、自动挂载(Ubuntu)

文章目录 具体方法GPT分区表&#xff08;GUID Partition Table&#xff09;&#xff08;建议都用这种分区方法&#xff09;MBR分区表方法&#xff08;最大支持2TB分区&#xff09;&#xff08;Master Boot Record&#xff09; 附加&#xff1a;如何查看硬盘的型号另外&#xff…

刘艳兵-DBA042-下述哪些文件是在CREATE DATABASE命令中创建的?

下述哪些文件是在CREATE DATABASE命令中创建的&#xff1f; A 口令文件 B 静态参数文件 C SYSAUX表空间数据文件 D SYSTEM表空间数据文件 E 动态参数文件 F 联机重组日志文件 G 控制文件 答&#xff1a; C SYSAUX表空间数据文件 D SYSTEM表空间数据…

【c++入门】打开新世界大门之初遇c++

前言 在学习了c语言&#xff0c;初阶数据结构后&#xff0c;我们正式走进c世界大门 目录 前言 一、认识c 二、缺省参数 三、函数重载 四、引用 4.1什么是引用&#xff1f; 4.2 使用场景 4.2.1 做参数 4.2.2做函数返回值 4.3引用和指针的区别 五、内联函数 六、auto关…

FIFO和LRU算法实现操作系统中主存管理

FIFO&#xff0c;用数组实现 1和2都是使用nextReplace实现新页面位置的更新 1、不精确时间&#xff1a;用ctime输出运行时间都是0.00秒 #include <iostream> #include <iomanip> #include<ctime>//用于计算时间 using namespace std;// 页访问顺序 int pa…

基于微信小程序的河池旅游设计与实现

一、前言 随着移动互联网的快速发展&#xff0c;微信小程序以其便捷性、无需安装等优势受到广泛关注。河池拥有丰富的旅游资源&#xff0c;包括独特的自然风光&#xff08;如巴马长寿之乡的山水、宜州下枧河风光等&#xff09;、多彩的民族文化&#xff08;如壮族铜鼓文化、仫佬…

mysqldbcompare 使用及参数详解

限制 该工具将每行的主键读取到数据结构中&#xff0c;然后用于生成每行的校验和。主键和校验和随后被排序并比较&#xff0c;以检测哪些行存在差异。由于这种设计&#xff0c;工具在处理非常大的表&#xff08;许多行&#xff09;时可能会表现出较慢的性能&#xff0c;特别是…

Maven详解

文章目录 Maven详解一、引言二、Maven基础1、Maven安装与配置1.1、下载与安装1.2、配置环境变量1.3、验证安装 2、Maven项目结构 三、Maven依赖管理3.1、依赖配置3.2、依赖范围 四、Maven构建生命周期4.1、常用Maven命令 五、Maven私服5.1、Nexus安装与配置5.1.1、下载与安装Ne…

排序算法:直接插入排序,希尔排序,选择排序,快速排序,堆排序,归并排序

1.直接插入排序 基本思想&#xff1a;把待排序的数按照大小逐个插入到前面已经排序好的有序序列中&#xff0c;直到所有的都插入完为止&#xff0c;得到一个新的有序序列。 如图所示&#xff0c;当插入第i个&#xff08;i>1&#xff09;元素的时候&#xff0c;前面的arr[0]…