如何在SvelteKit中更新页面查询参数并保证load函数正常触发？

问题根因 #

• $page是SvelteKit提供的只读状态store，直接修改$page.query的操作不符合框架规范，会导致内部状态不一致，这是偶尔不触发load函数的核心原因。
• 额外添加invalidate后load执行两次，是因为invalidate会主动触发一次load重跑，goto识别到查询参数变化又会触发第二次，重复执行会导致props短暂回退为旧值，出现搜索框内容闪跳的问题。

修正方案 #

1. 核心实现修改 #

不要直接操作只读的$page.query，独立构造新的查询参数，同时给goto添加配置项优化交互体验：

<script context="module">
  export async function load({ page, fetch }) {
    const response = await fetch(`/data.json?${page.query.toString()}`)
    if (response.ok) {
      return {
        props: {
          body: await response.json()
        }
      }
    }
  }
</script>

<script>
  import { goto } from '$app/navigation'
  import { page } from '$app/stores'

  export let body
  // 用本地变量绑定输入框，初始值从page查询参数获取
  let word = $page.query.get('word') || ''

  function search() {
    // 独立构造新的查询参数，不修改原有的$page.query
    const newParams = new URLSearchParams($page.query.toString())
    newParams.set('word', word)
    // 加配置项：保持输入框焦点、不触发页面滚动、默认推入新的历史记录
    goto(`?${newParams.toString()}`, {
      keepFocus: true,
      noScroll: true
    })
  }
</script>

<main>
  <form on:submit|preventDefault={search}>
    <input bind:value={word}>
  </form>
  <!-- 渲染body的搜索结果 -->
</main>

2. 高版本适配（SvelteKit v1.0+） #

如果使用的是SvelteKit v1.0以上版本，page.query已被废弃，替换为page.url.searchParams即可：

• load函数内获取参数字符串改为page.url.searchParams.toString()
• 组件内初始值读取改为$page.url.searchParams.get('word') || ''

修改后完全覆盖需求：携带查询参数访问时自动填充搜索框、加载对应结果；搜索操作触发时自动同步更新查询参数、浏览器历史记录、搜索结果，不会出现漏触发load、重复执行、搜索框闪回的问题。

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