Nuxt3 useFetch刷新时重复发送相同请求，未更新请求URL问题

你的useFetch初始化时，URL是通过模板字符串静态生成的——route.query.cat的值只在组件第一次渲染时被读取，后续路由query变化时，refresh()调用的还是最初的URL，所以后端始终收到同一个分类的请求。

方案1：用params传递查询参数（推荐） #

利用useFetch的params配置，Nuxt会自动监听参数变化并重新发起请求，无需手动watch和refresh：

<script setup>
const route = useRoute()

const { data: categories } = await useFetch('http://127.0.0.1:8000/api/tasks/category/', {
  key: route.fullPath,
  initialCache: false
})

const { data: tasks } = await useFetch('http://127.0.0.1:8000/api/tasks/', {
  params: { cat: route.query.cat },
  key: `tasks:${route.query.cat}`,
  initialCache: false
})
</script>

方案2：手动更新请求URL #

如果要保留模板字符串的写法，需要在refresh时传入最新的URL：

<script setup>
const route = useRoute()

const { data: categories } = await useFetch('http://127.0.0.1:8000/api/tasks/category/', {
  key: route.fullPath,
  initialCache: false
})

const { data: tasks, refresh } = await useFetch(`http://127.0.0.1:8000/api/tasks/?cat=${route.query.cat}`, {
  key: `tasks:${route.query.cat}`,
  initialCache: false
})

watch(() => route.query.cat, () => {
  refresh({ url: `http://127.0.0.1:8000/api/tasks/?cat=${route.query.cat}` })
})
</script>

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