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

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

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

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

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

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) return
  currentId.value = newId
  fetchData(newId)
})

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

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