vue中路由缓存

ops/2024/11/27 1:01:17/

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/ops/136954.html

相关文章

【unity小技巧】Unity 四叉树算法实现空间分割、物体存储并进行查询和碰撞检测

文章目录 前言四叉树的工作原理四叉树的优点四叉树的应用场景案例四叉树实现空间分割和物体存储并进行查询四叉树节点类使用示例 解释 四叉树实现碰撞检测四叉树的构建四叉树的实现步骤1. 创建四叉树的基本类2. 在 Unity 中使用四叉树进行碰撞检测 3. 解释4. 优势5. 注意事项 完…

利用开源图床的技巧与实践

随着互联网的普及&#xff0c;图片的使用变得越来越广泛。无论是个人博客、社交媒体还是企业网站&#xff0c;都离不开图片的呈现。而图床作为图片存储和管理的工具&#xff0c;可以帮助开发者和内容创作者高效地管理图片资源。本文将探讨如何利用开源图床&#xff0c;并提供相…

11.21Pytorch_属性常见转换操作

四、Tensor常见属性 张量有device、dtype、shape等常见属性&#xff0c;知道这些属性对我们认识Tensor很有帮助。 1. 获取属性 掌握代码调试就是掌握了一切~ import torchdef test001():data torch.tensor([1, 2, 3])print(data.dtype, data.device, data.shape)if __name…

【51单片机】程序实验56.独立按键-矩阵按键

主要参考学习资料&#xff1a;B站【普中官方】51单片机手把手教学视频 前置知识&#xff1a;C语言 单片机套装&#xff1a;普中STC51单片机开发板A4标准版套餐7 码字不易&#xff0c;求点赞收藏加关注(•ω•̥) 有问题欢迎评论区讨论~ 目录 独立按键按键介绍实验5 独立按键 矩…

Cmakelist.txt之win-c-udp-server

1.cmakelist.txt cmake_minimum_required(VERSION 3.16) ​ project(c_udp_server LANGUAGES C) ​ add_executable(c_udp_server main.c) ​ # link_directories("D:/Environment/mingw64/x86_64-w64-mingw32/lib") ​ target_link_libraries(c_udp_server wsock32…

SpringBoot开发——Maven多模块工程最佳实践及详细示例

文章目录 一、前言二、Maven多模块工程的最佳实践1、项目结构清晰2、依赖管理统一3、插件配置统一4、版本控制一致5、模块间通信简化 三、详细示例1、项目结构2、父模块&#xff08;parent&#xff09;的pom.xml文件3、子模块&#xff08;module-api&#xff09;的pom.xml文件4…

安装支持ssl的harbor 2.1.4 docker 19.03.8 docker-compose 1.24.0

版本&#xff1a; docker 19.03.8 docker-compose 1.24.0 harbor: harbor-offline-installer-v2.1.4.tgz 1、先在/root下生成证书 #生成ca根证书 openssl genrsa -out ca.key 4096#创建ca证书 openssl req -x509 -new -nodes -sha512 -days 3650 \-subj "/CCN/STShenzh…

ubuntu24挂载硬盘记录

1、显示硬盘及所属分区情况。在终端窗口中输入如下命令&#xff1a; sudo fdisk -l 找到自己硬盘的分区 我的地址/dev/sda 2、显示硬盘及所属分区情况。在终端窗口中输入如下命令&#xff0c;格式化自己硬盘&#xff1a; sudo mkfs -t ext4 /dev/sda 3、在终端窗口中输入如下…