当前位置: 首页> 游戏> 评测 > 网站游戏制作开发_销售培训主要培训内容_站长工具大全_网络推广渠道都有哪些

网站游戏制作开发_销售培训主要培训内容_站长工具大全_网络推广渠道都有哪些

时间:2025/7/11 8:49:11来源:https://blog.csdn.net/wch19960518/article/details/143934002 浏览次数:0次
网站游戏制作开发_销售培训主要培训内容_站长工具大全_网络推广渠道都有哪些

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>

在这里插入图片描述

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

关键字:网站游戏制作开发_销售培训主要培训内容_站长工具大全_网络推广渠道都有哪些

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: