vue路由缓存问题

devtools/2025/2/14 3:56:51/

什么是路由缓存问题

解决方案:

  1. 让组件实例不再复用,强制销毁重建
  2. 监听路由变化,变化之后执行数据更新操作

方法一

给 routerv-view 添加key属性,强制不添加缓存,破坏缓存,所以这个方法性能会比较差

<RouterView :key="$route.fullPath"/>

方法二

使用 onBeforeRouteUpdate钩子函数,做精确更新

没用onBeforeRouteUpdate前的渲染

javascript">//获取组件内部的路由参数,用useRoute
const route = useRoute()
const categoryData = ref([])
const getCategory = async ()=>{// 如何在setup中获取路由参数 useRoute() -> route 等价于this.$routeconst res = await getTopCategoryAPI(route.params.id)categoryData.value = res.result
}
onMounted(()=>getCategory())

用onBeforeRouteUpdate后

javascript">//获取组件内部的路由参数,用useRoute
const route = useRoute()
const categoryData = ref([])//如果调用该函数时没有传入 id,则默认使用 route.params.id 的值。
const getCategory = async (id = route.params.id)=>{// 如何在setup中获取路由参数 useRoute() -> route 等价于this.$routeconst res = await getTopCategoryAPI(id)categoryData.value = res.result
}
onMounted(()=>getCategory())onBeforeRouteUpdate((to)=>{//to 是即将进入的路由对象getCategory(to.params.id)
})


http://www.ppmy.cn/devtools/125242.html

相关文章

竞赛C/C++ 代码模板

大家都知道&#xff0c;比赛&#xff0c;竞争过程&#xff0c;争分夺秒&#xff01; 大家也知道&#xff0c;比赛&#xff0c;编程耗时&#xff0c;至关重要&#xff01; 为了解决这一问题&#xff0c;我写一下大佬们&#xff0c;书写时的代码习惯。 熟悉掌握之后&#xff0c;能…

Python基础语法(1)

文章目录 Python基础语法字面量常用的值的类型如何基于print语句完成各类字面量的输出 注释变量数据类型type()语句 数据类型转化常见的转换语句 标识符标识符命名规则 运算符字符串扩展字符串的三种定义方式字符串拼接字符串格式化数字精度的控制快速写法表达式的格式化 Pytho…

Ubuntu安装Apache教程

系统版本&#xff1a;Ubuntu版本 23.04 Ubuntu是一款功能强大且用户友好的操作系统&#xff0c;而Apache是一款广泛使用的Web服务器软件。在Ubuntu上安装Apache可以帮助用户搭建自己的网站或者进行Web开发。为大家介绍如何在Ubuntu上安装Apache&#xff0c;并提供详细的教程和操…

WPF中的内容控件

控件分类 在第一篇文章.Net Core和WPF介绍中的WPF的功能和特性部分根据功能性介绍了WPF的控件 名称。 在接下来的文章中&#xff0c;将会详细的介绍各个控件的概念及使用。 主要包括&#xff1a; 内容控件&#xff1a;Label、Button、CheckBox、ToggleButton、RadioButton、…

BUG调试记录:C++中有符号类型和无符号类型在自动补位时的差异

BUG调试记录&#xff1a;C中有符号类型和无符号类型在自动补位时的差异 昨天和同事一起干活的过程中&#xff0c;项目中一个函数的计算结果出现了问题&#xff0c;即使我们反复对照流程图并进行了一系列的手算也没有发现任何编码上的差错&#xff0c;在逻辑上整个函数的编写是完…

数据仓库中的维度建模:深入理解与案例分析

数据仓库中的维度建模&#xff1a;深入理解与案例分析 维度建模是数据仓库设计中最常用的一种方法&#xff0c;旨在简化数据访问、提高查询效率&#xff0c;特别适用于需要对数据进行多维分析的场景。本文将深入探讨维度建模的核心概念、设计步骤以及如何将其应用于实际案例中…

Java—继承性与多态性

目录 一、this关键字 1. 理解this 2. this练习 二、继承性 2.1 继承性的理解 2.1.1 多层继承 2.2 继承性的使用练习 2.2.1 练习1 2.2.2 练习2 2.3 方法的重写 2.4 super关键字 2.4.1 子类对象实例化 三、多态性 3.1 多态性的理解 3.2 向下转型与多态练习 四、Ob…

Mongodb重装

一 卸载MongoDB 1 停止 MongoDB 服务 首先停止正在运行的 MongoDB 服务&#xff1a; sudo systemctl stop mongod2 卸载 MongoDB 包 使用 yum 命令删除 MongoDB 相关的包&#xff1a; sudo yum remove mongodb-org3 删除数据目录和日志文件(根据实际情况操作&#xff0c;留…