如何更新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在这些情况下不会被调用。我可以通过await invalidate在 , 之前添加 URL 来让它可靠地工作goto，但 nowload总是被调用两次，并且搜索字段很快就会翻转回旧值。

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

Answer 1

我有类似的问题触发load功能，我通过创建新实例URLSearchParams并导航到这些新参数来解决它。

let query = new URLSearchParams($page.url.searchParams.toString());
    
query.set('word', word);
        
goto(`?${query.toString()}`);

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