nuxt3 改变query强制刷新

在 Nuxt v3 中，如果你想要改变查询参数（query）并且强制页面刷新，通常在修改之后需要手动触发视图的更新。因为 Nuxt Router 默认并不会监听 query 变化而自动刷新，除非设置了 `refreshOnPageChange` 选项。

你可以通过以下方法在组件内改变 query 并强制刷新：

import { useRouter } from '@nuxt/router'
import { ref } from 'vue'

export default {
  setup() {
    const router = useRouter()
    const myQuery = ref({ ...router.query });

    function updateQuery(key, value) {
      router.push({
        path: router.currentRoute.path,
        query: { ...myQuery.value, [key]: value },
        replace: true, // 强制刷新
      });
      myQuery.value[key] = value; // 更新本地引用
    }

    return {
      updateQuery,
      myQuery
    }
  }
}

在这个例子中，当你调用 `updateQuery` 函数并传入新的键值对时，页面会被替换刷新，并且 `myQuery` 对象也会同步更新。