如何更新 SvelteKit 中的页面和查询参数？答案

【问题标题】：How to update the page and query parameters in SvelteKit?如何更新 SvelteKit 中的页面和查询参数？
【发布时间】：2022-03-12 22:52:25
【问题描述】：

我有一个带有搜索字段的页面。如果使用查询参数（例如?word=cat）访问，则页面应加载显示结果并填充搜索字段。如果完成搜索，结果和查询参数（浏览器历史记录）应该会更新。

我发现更新查询参数的唯一方法是goto，所以我的尝试是：

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

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

  export let word
  export let body

  function search() {
    $page.query.set('word', word)
    goto(`?${$page.query.toString()}`)
  }
</script>

<main>
  <form on:submit|preventDefault={search}>
    <input bind:value={word}>
  </form>
  <!-- ... -->
</main>

这可行，但有时仅更新查询参数就卡住了。出于某种原因，load 在这些情况下不会被调用。我可以通过在goto 之前为 URL 添加await invalidate 来使其可靠地工作，但现在load 总是被调用两次，并且搜索字段很快就会翻转回旧值。

我刚开始使用 Svelte/SvelteKit，所以我的方法可能是错误的。感谢您的帮助。

【问题讨论】：

尝试删除 $page.query.set 行并简单地使用 goto 就足够了
谢谢，我用单独的URLSearchParams 替换了它，它可以工作。

标签： svelte sveltekit

【解决方案1】：

我在触发 loadfunction 时遇到了类似的问题，我通过创建 URLSeachParams 的新实例并导航到这些新参数来解决它。

let query = new URLSearchParams($page.query.toString());

query.set('word', word);
    
goto(`?${query.toString()}`);

【讨论】：

谢谢，我就是这么做的。

【解决方案2】：

$page.query 不再可用，因为它已被 $page.url 替换（在 @sveltejs/kit@1.0.0-next.208 中）。

现在，它是这样完成的：

$page.url.searchParams.set('word',word); 
goto(`?${$page.url.searchParams.toString()}`);

$page 和 goto() 你可以从：

import { goto } from "$app/navigation";
import { page } from "$app/stores";

【讨论】：

实际上，这将改变page 的内部URLSearchParams，这可能会在使用响应式语句时引起一些问题。更好的方法是从$page.url.searchParams 创建和变异一个新的URLSearchParams，然后在goto (goto(newSearchParams)) 中使用它。

【解决方案3】：

更短的方法：

$page.query.set('word',word); 
goto(`?${$page.query.toString()}`);

【讨论】：

github.com/sveltejs/kit/issues/2785