如何在 SvelteKit 中更新页面和查询参数？

Question

我有一个带有搜索字段的页面。如果使用查询参数（例如 ?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，所以我的方法可能是错误的。感谢您的帮助。

Answer 1

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

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

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

Answer 2

更短的方法：

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

Answer 3

$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";

如何在 SvelteKit 中更新页面和查询参数？

How to update the page and query parameters in SvelteKit?

svelte

sveltekit