【Vue3】解决路由缓存问题(响应路由参数的变化)

官方文档解释:

在这里插入图片描述

解决问题的思路:

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

方案一:给router-view添加key

以当前路由完整路径为key 的值,给router-view组件绑定

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

在这里插入图片描述

所以添加 key之后会强制替换组件,重新发送所有请求(某些情况下不需要重新发送所有请求,会造成性能浪费),而非复用。

方案二:使用 beforeRouteUpdate 导航钩子

beforeRouteUpdate 钩子函数可以在每次路由更新之前执行,在回调中执行需要数据更新的业务逻辑即可。

在这里插入图片描述

这里只需要 getCategory 重新请求,而 getBanner 不重新请求。

注意点:这里 id 会变化,不传入则使用 默认id,使用 to 的目的在于获取将要到达路由的 params参数。又因为 onBeforeRouteUpdate 是在跳转之前就执行的钩子,所以只能通过 to 来获取即将到达的路由的参数。

const getCategory = async (id = route.params.id) => {const res = await getCategoryAPI(id)categoryData.value = res.result
}const getBanner = async () => {const res = await getBannerAPI({distributionSite: '2'})bannerList.value = res.result
}
onMounted(() => {getCategory()getBanner()
})// 路由参数变化的时候,可以把分类数据接口重新发送
onBeforeRouteUpdate((to)=> {getCategory(to.params.id)
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/671334.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何使用Docker部署Nginx容器实现无公网ip远程访问本地服务

文章目录 1. 安装Docker2. 使用Docker拉取Nginx镜像3. 创建并启动Nginx容器4. 本地连接测试5. 公网远程访问本地Nginx5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定公网地址远程访问 在开发人员的工作中&#xff0c;公网远程访问内网是其必备的技术需求之一。对于…

mvn常见报错:Failed to read artifact descriptor for 解决

问题&#xff1a; mvn打包时报错&#xff1a;Failed to read artifact descriptor for 产生原因&#xff1a; 项目打包时所需的依赖包不存在本地仓库&#xff0c;或本地仓库文件存在问题。 解决方法&#xff1a; 检查仓库可用性&#xff1a; 确保在Maven设置或pom.xml中指定…

引入BertTokenizer出现OSError: Can‘t load tokenizer for ‘bert-base-uncased‘.

今天在跑一个模型的时候出现该报错&#xff0c;完整报错为&#xff1a; OSError: Cant load tokenizer for bert-base-uncased. If you were trying to load it from https://huggingface.co/models, make sure you dont have a local directory with the same name. Otherwis…

npm 上传一个自己的应用(3) 在项目中导入及使用自己上传到NPM的工具

上文 npm 上传一个自己的应用(2) 创建一个JavaScript函数 并发布到NPM 我们创建了一个函数 并发上了npm 最后 我们这里 我们可以看到它的安装指令 这里 我们可以打开一个vue项目 终端输入 我们的安装指令 npm i 自己的包 如下代码 npm i grtest我们在 node_modules目录 下…

Python 套接字详解:与网络通信的温柔邂逅

网络世界&#xff0c;犹如一片无垠的海洋&#xff0c;充满了无限的可能性和无尽的探索。而在这个浩瀚的网络宇宙中&#xff0c;Python 语言以其简洁优雅、功能丰富而备受青睐。在 Python 的世界里&#xff0c;有一个神奇的工具&#xff0c;它就像是一座桥梁&#xff0c;将不同的…

dbeaver免费、跨平台数据管理软件

下载 dbeaver是一款的数据库连接工具&#xff0c;免费&#xff0c;跨平台。 官网&#xff1a;DBeaver Community | Free Universal Database Tool下载地址&#xff1a;Download | DBeaver Community 点击下载 安装 修改安装路径 点击安装 点击完成 使用 连接mysql 已连接 点…

JAVASE进阶:一文精通Stream流+函数式编程

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;JAVASE进阶&#xff1a;源码精读——HashMap源码详细解析 &#x1f4da;订阅专栏&#xff1a;JAVASE进阶 希望文章对你们有所帮助…

万物皆可问 — 私有部署网易有道QAnything

什么是 QAnything&#xff1f; QAnything&#xff08;Question and Answer based on Anything&#xff09;是一个本地知识库问答系统&#xff0c;旨在支持多种文件格式和数据库&#xff0c;允许离线安装和使用。使用QAnything&#xff0c;您可以简单地删除本地存储的任何格式的…

Linux学习

1 Linux的目录结构介绍 bin存放常用的命令etc存放配置文件bootlinux启动的文件home存放用户lib存放动态库&#xff0c;给应用程序使用lostfound一般是空的&#xff0c;但系统异常关机会产生文件media自动挂载&#xff0c;如u盘&#xff0c;光盘mnt手动挂载&#xff0c;一般自己…

利用Excel爬取网页数据

想要获取网页上的表格数据&#xff0c;可以通过Excel自带的功能&#xff0c;从网站导入数据&#xff0c;并且可以实时刷新最新数据。具体步骤如下&#xff1a; 1、新建Excel&#xff0c;打开&#xff0c;选择【数据】-【自网站】 2、在弹出的对话框中输入目标网址&#xff0c;…

子集枚举介绍

集合枚举的意思是从一个集合中找出它的所有子集。集合中每个元素都可以被选或不选&#xff0c;含有n个元素的集合总共有个子集&#xff08;包括全集和空集&#xff09; 例如考虑集合和它的4个子集、、、&#xff0c;按照某个顺序&#xff0c;把全集A中的每个元素在每个子集中的…

LeetCode:9.回文数,对整数的反转操作

博主本想找个简单的题水一下&#xff0c;结果太久没写这块的代码&#xff0c;直接写着宕机着&#xff0c;十分难受&#xff0c;最后还调试了几下&#xff0c;悲&#xff0c; 目录 题目&#xff1a; 思路&#xff1a; 官方代码&#xff08;反转一半的&#xff09;&#xff1a…

酷开科技,打造非凡的生活体验

酷开科技&#xff0c;作为一家专注于智能电视操作系统研发及智能电视运营增值服务的高科技企业&#xff0c;始终致力于为消费者提供非凡的生活体验。通过不断创新的技术和产品&#xff0c;酷开科技为消费者们带来了便捷、舒适、个性化的智能生活。 首先&#xff0c;酷开科技在智…

【Linux笔记】文件系统与软硬链接

一、文件系统概述 1.1、先来聊一聊“磁盘” 在讲解文件系统之前&#xff0c;我觉得有必要先聊一下“磁盘”&#xff0c;因为我觉得如果弄懂了磁盘的存储原理&#xff0c;大家可能更容易理解文件系统是怎么管理数据的&#xff0c;并且理解计算机是怎么将磁盘抽象到文件系统的。…

Lua函数进阶

函数是值类型 《programming in lua》里面举了一个非常生动的例子&#xff1a; a {p print} a.p("Hello World") --> Hello World print math.sin -- print now refers to the sine function a.p(print(1)) --> 0.841470 sin a.p -- sin now refers …

符号绑定和函数绑定

符号绑定 其实我们平常定义的变量等&#xff0c;在编译之后都会被转化为地址&#xff0c;这些变量我们称之为符号。 我们在程序运行的时候&#xff0c;使用变量&#xff0c;其实就是从变量转换的地址中找到内存中存储的数据。符号绑定其实就是: 将我们程序中使用到的变量名等…

Leetcode 518 零钱兑换 II

题意理解&#xff1a; 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 将coins看作不同重量的背包&#xff0c;然后把要凑成的组…

unity实现第一人称和第三人称

在角色设置两个挂载点&#xff0c;第一人称时&#xff0c;相机放在eys上面&#xff0c;切换第三人称时&#xff0c;放置到3rd节点上面&#xff0c;调整节点位置&#xff0c;达到期望效果 代码 void ThirdView(){Debug.Log("切换到第三人称");camera.SetParent(third…

C# Task的使用

C#中的Task类是.NET框架中用于实现异步编程的核心组件之一&#xff0c;它在.NET Framework 4及更高版本以及.NET Core中广泛使用。Task对象代表一个异步操作&#xff0c;并提供了跟踪异步操作状态、获取结果和处理完成通知的方法。 Task 类提供了对异步操作的封装&#xff0c;…

SaperaCamExpert(相机专家)中文使用指南

参考&#xff1a;SaperaCamExpert中文使用指南.PDF 文章目录 软件介绍安装首次打开资源占用率功能主界面布局菜单栏FileViewPre-Processing&#xff1a;预处理 Tools&#xff1a; 快捷键&#xff1a;新建&#xff1b;打开&#xff1b;保存&#xff1b;帮助Device窗体属性树图像…