SvelteKit中pushState浅路由无法设置page.state.cart问题求助

一、实现无重载导航并传递购物车数据 #

放弃直接使用pushState()，改用SvelteKit内置的goto函数——它默认支持客户端无重载导航，同时能通过state参数传递数据，完美适配你的需求：

1. 在cart.svelte的按钮点击事件中，传入购物车Store的当前值：

<script>
  import { goto } from '$app/navigation';
  import { cartStore } from '$lib/stores/cart';

  async function proceedToOrderType() {
    // 获取当前购物车实时数据
    const currentCart = $cartStore;
    // 带state跳转，无重载且保留内存中的Store
    await goto('/ordertype', {
      state: { cart: currentCart },
      noScroll: true
    });
  }
</script>

<button on:click={proceedToOrderType}>选择取货/配送方式</button>

2. 在ordertype.svelte中直接读取传递的购物车数据：

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

{#if $page.state.cart}
  <p>当前购物车商品数：{$page.state.cart.items.length}</p>
{/if}

二、避免ordertype页面load函数重复执行 #

在ordertype页面的+page.js或+page.server.js的load函数中，判断page.state.cart是否存在，存在则直接返回数据，跳过重复加载逻辑：

export async function load({ page }) {
  // 如果state中已有购物车数据，直接返回，不执行原有加载逻辑
  if (page.state.cart) {
    return { cart: page.state.cart };
  }
  // 这里写原有必要的加载逻辑（比如从数据库拉取基础数据，非必要可省略）
  return { cart: {} };
}

三、触发ordertype页面的表单动作 #

在ordertype.svelte中，基于传入的购物车数据初始化表单，用户选择取货/配送方式后提交即可：

<script>
  import { page } from '$app/stores';
  let orderType = 'pickup';

  async function submitOrderType() {
    // 结合购物车数据和选择的配送类型构造表单数据
    const formData = new FormData();
    formData.append('orderType', orderType);
    formData.append('cart', JSON.stringify($page.state.cart));

    // 提交表单（可使用SvelteKit表单动作或fetch请求）
    const response = await fetch('/api/submit-order-type', {
      method: 'POST',
      body: formData
    });
  }
</script>

<form on:submit|preventDefault={submitOrderType}>
  <label>
    <input type="radio" name="orderType" value="pickup" bind:group={orderType} checked>
    到店取货
  </label>
  <label>
    <input type="radio" name="orderType" value="delivery" bind:group={orderType}>
    配送到家
  </label>
  <button type="submit">确认方式</button>
</form>

关键说明 #

• goto的客户端导航会自动保留内存中的Svelte Store，无需额外处理；若需要刷新页面后仍保留购物车，可同时将Store数据存入localStorage
• $page.state仅在客户端导航时有效，刷新页面后会丢失，所以持久化需求需单独处理

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