如何通过锚点在SvelteKit页面间传递完整对象？

可行方案 #

方案一：客户端导航时通过goto传递state #

SvelteKit的goto函数支持传递state参数，能在客户端导航时直接把完整对象传给目标页，无需额外存储。

1. 修改列表页（routes/+page.svelte）的跳转逻辑：

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

{#each foos as foo}
  <a 
    href="/foo/{foo.id}" 
    on:click={(e) => {
      e.preventDefault();
      goto(`/foo/${foo.id}`, { state: { foo } });
    }}
  >
    {foo.id}
  </a>
{/each}

2. 在目标页（routes/foo/[id]/+page.svelte）中获取传递的对象：

<script>
  import { page } from '$app/stores';
  let foo = $page.state.foo;
</script>

{#if foo}
  <!-- 直接复用已有的foo对象渲染内容 -->
  <div>名称：{foo.name}</div>
  <div>详情：{foo.description}</div>
{:else}
  <!-- 兜底逻辑：如果是刷新页面或直接访问，从数据库重新加载 -->
  {#await data.foo}
    加载中...
  {:then foo}
    <div>名称：{foo.name}</div>
    <div>详情：{foo.description}</div>
  {/await}
{/if}

方案二：用sessionStorage临时存储对象 #

如果需要支持刷新页面后依然能复用对象，可以用sessionStorage临时存储，注意对象需要序列化为JSON。

1. 列表页点击时存储对象：

{#each foos as foo}
  <a 
    href="/foo/{foo.id}" 
    on:click={() => {
      sessionStorage.setItem(`foo_${foo.id}`, JSON.stringify(foo));
    }}
  >
    {foo.id}
  </a>
{/each}

2. 目标页加载时读取并清理存储：

<script>
  import { page } from '$app/stores';
  import { onMount } from 'svelte';

  let foo;

  onMount(() => {
    const storedFoo = sessionStorage.getItem(`foo_${$page.params.id}`);
    if (storedFoo) {
      foo = JSON.parse(storedFoo);
      sessionStorage.removeItem(`foo_${$page.params.id}`);
    }
  });
</script>

{#if foo}
  <!-- 复用存储的对象 -->
{:else}
  <!-- 兜底从数据库加载 -->
  {#await data.foo}加载中...{/await}
{/if}

注意事项 #

• 不要尝试修改$page store：$page是只读的SvelteKit内置store，无法直接修改，强行修改会引发不可预期的问题。
• 必须保留数据库兜底逻辑：无论是state还是sessionStorage都可能失效（比如用户直接刷新目标页、浏览器禁用本地存储），目标页的load函数仍需保留数据库查询逻辑。
• 序列化限制：如果foo包含函数、日期等无法JSON序列化的内容，需要额外处理（比如日期转字符串、函数单独提取）。

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