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
英文地址,請注明出處:http://en.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(企業資源計劃系統)已成為支撐企業高效運轉的核心骨架。它們如同企業的 “神經中樞”,串聯起客戶數據、財務信息、供應鏈流程等關鍵環節,為決策制定、業務…