SvelteKit表单提交：如何同时实现重定向并返回数据？

除了URL参数，有几种实用的方法可以实现需求：

1. 服务端会话存储 #

利用服务端会话暂存数据，重定向后目标页面从会话读取并及时清理数据，适合必须服务端重定向的场景：

表单Action示例： #

import { redirect } from '@sveltejs/kit';
// 假设已配置服务端会话管理（如适配自带会话或自定义会话逻辑）
import { session } from '$lib/server/session';

export async function POST({ request, cookies }) {
  const formData = await request.formData();
  // 准备需要传递的数据
  const submitData = {
    status: 'success',
    userInput: formData.get('user_input'),
    message: '表单提交成功'
  };

  // 将数据存入会话
  await session.set(cookies, 'post_submit_data', submitData);

  // 触发服务端重定向
  throw redirect(303, '/success-page');
}

目标页面加载逻辑示例（+page.server.js）： #

import { session } from '$lib/server/session';

export async function load({ cookies }) {
  // 从会话读取数据
  const submitData = await session.get(cookies, 'post_submit_data');

  // 读取后立即删除，避免数据残留到后续请求
  if (submitData) {
    await session.delete(cookies, 'post_submit_data');
  }

  return { submitData };
}

之后在目标页面组件中，即可通过data.submitData访问传递的数据。

2. Flash消息（会话扩展方案） #

多数会话库支持Flash消息机制：数据仅在下次请求中有效，读取后自动销毁，专门适配这种一次性跨请求传数据的场景：

// 表单Action中
import { redirect } from '@sveltejs/kit';
import { setFlash } from '$lib/server/flash';

export async function POST({ request, cookies }) {
  const formData = await request.formData();
  // 设置Flash消息
  await setFlash(cookies, {
    success: true,
    details: `你提交的内容是：${formData.get('content')}`
  });

  throw redirect(303, '/result');
}

目标页面加载时直接读取Flash消息即可，无需手动清理。

3. 客户端路由导航 + 状态管理 #

如果不需要服务端重定向，可以在客户端处理表单提交，拿到返回数据后用客户端路由导航，同时通过Svelte的Context、自定义Store传递数据：

页面组件示例： #

import { goto } from '$app/navigation';
import { writable } from 'svelte/store';

// 自定义临时存储store
export const submitStore = writable(null);

async function handleSubmit(e) {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  const res = await fetch('/submit-action', {
    method: 'POST',
    body: formData
  });

  if (res.ok) {
    const data = await res.json();
    // 将数据存入store
    submitStore.set(data);
    // 客户端导航到目标页面
    goto('/success');
  }
}

在目标页面组件中订阅submitStore即可获取数据。

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