Vue 3 中使用路由参数跳转时 watch 触发重复请求问题详解

📘Vue 3 中使用路由参数跳转时 watch 触发重复请求问题详解

🔖 收藏 + 点赞 + 关注,掌握 Vue 3 路由参数监听中的隐藏陷阱,避免详情页、嵌套路由页误触发重复请求!


🧩 一、问题背景

在 Vue 3 项目中,常见需求是:

  • 列表页点击跳转到详情页,传递 id 参数
  • 详情页通过 watch(() => route.query.id) 监听路由变化,自动请求数据

例如:

watch(() => route.query.id, (newId) => {fetchDetail(newId)
})

📌 看似合理,但如果你在详情页内点击跳转其他页面(如订单详情页),此 watch 也会执行,可能导致:

  • 重复发起请求
  • 未更新界面但数据已重新加载
  • 性能浪费与闪烁问题

🚨 二、问题演示

示例场景:

  • 当前在 /performance/detail?id=1001
  • 页面中点击跳转订单详情页 /order/detail?id=123456
  • 此时路由 query.id 发生变化,watch(() => route.query.id) 被触发
  • 结果是:getList() 又执行了一次

❗问题本质:

watch(() => route.query.id, (newId) => {getList() // 此时其实已跳转出当前详情页了!
})

✅ 三、正确解决方案

✨ 核心思路:监听时加“当前页面判断”

watch(() => route.query.id, (newId) => {if (route.name !== 'PerformanceDetail') return // 👈 页面已跳转,不处理if (newId && newId !== userId.value) {userId.value = newIdqueryParams.value.userId = newIdgetList() // ✅ 安全触发}
})

🔧 四、配合路由 name 使用

你需要在路由配置中设置 name

{path: '/performance/detail',name: 'PerformanceDetail',component: () => import('@/views/PerformanceDetail.vue')
}

路由中使用 route.name 是判断是否仍在当前页面的推荐方式。


📌 五、完整封装模板(推荐复制使用)

import { watch } from 'vue'
import { useRoute } from 'vue-router'const route = useRoute()watch(() => route.query.id, (newId) => {if (route.name !== 'YourPageName') return  // 避免跳出当前页还触发请求if (!newId || newId === currentId.value) returncurrentId.value = newIdfetchData(newId)
})

🎁 六、进阶封装建议:自定义 Hook

你还可以封装为通用函数:

function useQueryParamWatcher(key, callback, routeName) {const route = useRoute()watch(() => route.query[key], (val) => {if (route.name !== routeName) returncallback(val)}, { immediate: true })
}

使用:

useQueryParamWatcher('id', fetchData, 'PerformanceDetail')

✅ 七、总结建议

场景是否触发 watch
当前详情页中更换 id✅ 应触发
从详情页跳转订单页❌ 不应触发
浏览器返回回到详情页✅ 应触发
从其他模块进入此页✅ 应触发

🚫 不判断路由名称,watch 很容易被“跨页参数变动”误触发!


🧠 八、知识点补充

  • route.query.id 是响应式的,变化即触发 watch
  • Vue Router 的 query 和 params 都是响应式
  • 路由跳转过程中,setup 并不会重新执行,watch 需要手动判断上下文

📚 结语

通过本文你应掌握:

✅ 为什么 watch(route.query.id) 会重复触发
✅ 如何判断是否仍在当前页面
✅ 如何使用 route.name 做页面隔离
✅ 如何避免离开时误请求、重复请求

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

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

相关文章

前端 项目更新通知 (plugin-web-update-notification)

项目版本更新迭代时,需提示用户更新系统,不然早时间不更新对用户体验很不好,所以在每次部署后需要提示用户,刷新静态资源。推荐插件 plugin-web-update-notification .具体配置 vite.config.js文件中 import { webUpdateNotice …

【力扣(LeetCode)】数据挖掘面试题0002:当面对实时数据流时您如何设计和实现机器学习模型?

文章大纲一、实时数据处理:构建低延迟的数据管道1. 数据接入与缓冲2. 实时清洗与校验3. 特征标准化与对齐二、模型设计:选择适配实时场景的模型架构1. 模型选择原则三、训练与更新策略:离线与在线协同,应对概念漂移1. 离线-在线协…

TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)

问题描述: 客户前端部署在nginx上,后端部署在tongweb8上(相当于前后端分离),登录的时候报错,f12看network,状态码405,如下所示:看console,如下所示&#xff1…

mysql互为主从失效,重新同步

一、分别登录服务器A和服务器B的mysqlmysql -u root -p 123456789二、分别查看数据库状态信息,下边两项参数有一项为NO就表示同步异常Slave_IO_Running:从服务器(Slave)中的 I/O 线程的运行状态Slave_SQL_Running:从服务器上的 SQL 线程是否正在运行mysq…

板凳-------Mysql cookbook学习 (十一--------6)

https://blog.csdn.net/weixin_43236925/article/details/146382981 清晰易懂的 PHP 安装与配置教程 12.6 查找每组行中含有最大或最小值的行 mysql> set max_price (select max(price) from painting); Query OK, 0 rows affected (0.01 sec)mysql> select artist.name…

ECS由浅入深第四节:ECS 与 Unity 传统开发模式的结合?混合架构的艺术

ECS由浅入深第一节 ECS由浅入深第二节 ECS由浅入深第三节 ECS由浅入深第四节 ECS由浅入深第五节 尽管 ECS 带来了显著的性能和架构优势,但在实际的 Unity 项目中,完全摒弃 GameObject 和 MonoBehaviour 往往是不现实的。Unity 引擎本身的大部分功能&…

Mac关闭触控板

打开 “有鼠标或无线触控板时忽略内建触控板”选项即可 参考:Mac如何关闭触控板防止误触?内置的设置就可以达成 - Mac天空

Python:Rich 终端富文本与界面样式工具库

🖌️ 1、简述 Rich 是一个强大的 Python 库,用于在终端中呈现富文本和精美的格式,让命令行界面(CLI)应用拥有现代、美观的输出效果。本文将深入介绍 Rich 的核心功能,并通过一系列实际示例展示其强大能力。 Rich 由 Will McGugan 开发,主要特点包括: 丰富的文本样式:支…

深入解析享元模式:通过共享技术高效支持大量细粒度对象

深入解析享元模式:通过共享技术高效支持大量细粒度对象 🌟 嗨,我是IRpickstars! 🌌 总有一行代码,能点亮万千星辰。 🔍 在技术的宇宙中,我愿做永不停歇的探索者。 ✨ 用代码丈量世…

Docker高级管理

一、Docker 容器的网络模式 当项目大规模使用 Docker 时,容器通信的问题也就产生了。要解决容器通信问题,必须先了解很多关于网络的知识。Docker 的网络模式非常丰富,可以满足不同容器的通信要求,下表列出了这些网络模式的主要信息…

ABP VNext + Tye:本地微服务编排与调试

ABP VNext Tye:本地微服务编排与调试 🚀 📚 目录ABP VNext Tye:本地微服务编排与调试 🚀TL;DR ✨一、环境与依赖 🛠️二、核心配置详解 🚀1. 主配置 tye.yaml三、多环境文件 🌱&am…

Vue响应式原理一:认识响应式逻辑

核心思想:当数据发生变化时,依赖该数据的代码能够自动重新执行Vue中的应用:在data或ref/reactive中定义的数据,当数据变化时template会自动更新template的本质: 是render()函数, 用变化之后的数据重新执行render()函数…

Redis:分组与设备在 Redis 中缓存存储设计

一、缓存存储结构设计 分组与设备的映射关系(使用 Set 结构): 键格式:采用 group:{groupId}:devices 的格式作为 Redis 中 Set 的键,例如 group:1:devices 就代表了分组 ID 为 1 的分组所关联的设备集合。值内容&#…

Leetcode 3605. Minimum Stability Factor of Array

Leetcode 3605. Minimum Stability Factor of Array 1. 解题思路2. 代码实现 题目链接:3605. Minimum Stability Factor of Array 1. 解题思路 这一题的核心思路是二分法,本质上就是我们给定一个常数kkk,然后考察是否存在一个构造使得能够…

编译安装的Mysql5.7报“Couldn‘t find MySQL server (mysqld_safe)“的原因 笔记250709

编译安装的Mysql5.7报"Couldn’t find MySQL server (mysqld_safe)"的原因 笔记250709 MySQL 的安装路径与配置文件(如 my.cnf 或 mysql.server)中指定的 basedir 不一致。 mysqld_safe 文件实际位置与系统查找路径不匹配(常见于自…

在 Ubuntu 下配置 oh-my-posh —— 普通用户 + root 各自使用独立主题(共享可执行)

🧩 在 Ubuntu 下配置 oh-my-posh —— 普通用户 root 各自使用独立主题(共享可执行)✅ 目标说明普通用户 使用 tokyonight_storm 主题 root 用户 使用 1_shell 主题 共用全局路径下的 oh-my-posh 可执行文件 正确加载 Homebrew 到环境变量中…

Spring Boot 项目中的多数据源配置

关键词:Spring Boot、多数据源配置、MySQL、SQL Server、Oracle、动态切换 ✅ 摘要 在实际企业级开发中,一个 Spring Boot 项目可能需要连接多个数据库,比如 MySQL、SQL Server 和 Oracle。不同的业务模块可能依赖不同的数据源,这…

MATLAB/Simulink电机控制仿真代做 同步异步永磁直驱磁阻双馈无刷

以下是针对 MATLAB/Simulink 电机控制仿真 的系统性解决方案,涵盖 同步电机、异步电机、永磁电机、直驱电机、磁阻电机、双馈电机、无刷直流电机(BLDC) 的建模与控制策略实现,支持代做服务的技术细节和代码示例。一、电机建模与仿…

限流算法深度探索:从理论到实践的生产级避坑指南

凌晨3点,监控警报刺耳地尖叫着。我盯着屏幕上垂直下跌的服务可用性曲线,意识到那个被忽视的限流配置项终于引爆了——每秒1000次的支付请求正像洪水般冲垮我们的系统。这次事故让我深刻理解:限流不是可选项,而是分布式系统的生存法…

企业级后台管理系统的困境与飞算 JavaAI 的破局之道

企业级后台管理系统如 CRM(客户关系管理系统)、ERP(企业资源计划系统)已成为支撑企业高效运转的核心骨架。它们如同企业的 “神经中枢”,串联起客户数据、财务信息、供应链流程等关键环节,为决策制定、业务…