vue中路由缓存

vue中路由缓存

问题描述及截图

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


解决思路

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

关键代码及打印信息截图

bash 复制代码
修改文件: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>

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

相关推荐
YCOSA202515 分钟前
ISO 雨晨 26200.6588 Windows 11 企业版 LTSC 25H2 自用 edge 140.0.3485.81
前端·windows·edge
小白呀白20 分钟前
【uni-app】树形结构数据选择框
前端·javascript·uni-app
hong_zc23 分钟前
redis之缓存
数据库·redis·缓存
吃饺子不吃馅43 分钟前
深感一事无成,还是踏踏实实做点东西吧
前端·svg·图形学
90后的晨仔1 小时前
Mac 上配置多个 Gitee 账号的完整教程
前端·后端
少年阿闯~~2 小时前
CSS——实现盒子在页面居中
前端·css·html
开发者小天2 小时前
uniapp中封装底部跳转方法
前端·javascript·uni-app
阿波罗尼亚2 小时前
复杂查询:直接查询/子查询/视图/CTE
java·前端·数据库
Go高并发架构_王工2 小时前
MySQL内存优化:缓冲池与查询缓存调优技术详解
数据库·mysql·缓存
武昌库里写JAVA2 小时前
SpringCloud与微服务
vue.js·spring boot·sql·layui·课程设计