Nuxt3页面导航时如何刷新useFetch获取的评论数据？

你的问题出在useFetch的URL没有追踪响应式依赖：初始代码里的URL是直接用selectedSort.value和route.params.id拼接的静态字符串，组件初始化后这个URL就固定了，哪怕路由参数变化，refresh调用时还是用旧URL请求，自然拿不到新文章的评论。

下面是两种可行的修复方案：

方案1：用响应式URL自动触发请求 #

把URL改成响应式计算值，让useFetch自动追踪依赖变化并重新请求：

const selectedSort = ref('newest')
// 用computed生成动态URL
const commentApiUrl = computed(() => `/api/comments/${selectedSort.value}/${route.params.id}`)
const { data, pending, error, refresh } = useFetch(commentApiUrl)

或者直接给useFetch传一个返回URL的函数（内部会自动追踪依赖）：

const selectedSort = ref('newest')
const { data, pending, error, refresh } = useFetch(() => 
  `/api/comments/${selectedSort.value}/${route.params.id}`
)

这样不管是路由参数变化，还是排序方式切换，useFetch都会自动重新发起请求，不需要手动调用refresh。

方案2：修正watch并确保URL更新 #

如果你坚持要手动用watch触发refresh，需要先保证URL是动态的，再修正watch的语法错误（你的代码少了闭合的}）：

const selectedSort = ref('newest')
// 用函数返回动态URL，确保每次refresh时用最新参数
const { data, pending, error, refresh } = useFetch(() => 
  `/api/comments/${selectedSort.value}/${route.params.id}`
)

// 修正watch的语法，确保回调完整
watch(
  () => route.params.id,
  async () => {
    await refresh()
  }
)

关键说明 #

useFetch只有当传入的URL是响应式值（比如ref、computed）或者返回动态值的函数时，才会追踪依赖变化。如果直接传静态字符串，它只会在组件挂载时请求一次，后续依赖变化不会自动触发更新。

内容的提问来源于stack exchange，提问作者redshift