静态SPA模式下SvelteKit中layout向page传值及调用函数问题

一、解决Layout向Page传递数据时data为undefined的问题 #

你之前的核心错误是把load函数写在了+layout.svelte文件中——SvelteKit的load函数必须放在单独的+layout.js/ts文件（与+layout.svelte同级），不管是SSR还是静态SPA模式，返回的数据才能被Page组件正确获取。

实现步骤：

1. 在Layout目录下创建+layout.js文件，编写load函数：

// src/routes/+layout.js
export async function load() {
  return {
    layoutStaticData: "来自Layout的静态数据",
    // 静态SPA模式下，异步请求会在客户端执行
    layoutAsyncData: await fetch("/api/your-data").then(res => res.json())
  };
}

2. 在+page.svelte中直接通过export let data;获取合并后的数据集（包含Layout和Page自身load返回的数据）：

<!-- src/routes/+page.svelte -->
<script>
  export let data;
</script>

<p>Layout静态数据：{data.layoutStaticData}</p>
<p>Layout异步数据：{JSON.stringify(data.layoutAsyncData)}</p>

静态SPA模式下，load函数会在客户端执行，数据可正常传递给Page，不会出现undefined。

二、从Page调用Layout中的函数（无需Store和Module脚本） #

推荐使用Svelte上下文API（setContext/getContext），这是组件间传递方法的轻量方案，完全符合需求。

实现步骤：

1. 在+layout.svelte中定义函数并存入上下文：

<!-- src/routes/+layout.svelte -->
<script>
  import { setContext } from 'svelte';

  // 定义需要暴露给Page的Layout函数
  function handlePageCall(message) {
    console.log(`Layout函数被触发：${message}`);
    // 可直接修改Layout内部状态，实现UI更新
    this.layoutState = message;
  }

  // 用唯一key将方法存入上下文
  setContext('layoutPublicMethods', {
    handlePageCall
  });
</script>

<slot /> <!-- Page内容会渲染在此处 -->

2. 在+page.svelte中获取上下文方法并调用：

<!-- src/routes/+page.svelte -->
<script>
  import { getContext } from 'svelte';

  // 从上下文取出Layout方法
  const { handlePageCall } = getContext('layoutPublicMethods');
</script>

<button on:click={() => handlePageCall('来自Page的调用请求')}>
  调用Layout函数
</button>

这种方式依赖组件树上下文传递，无需全局状态或模块脚本，静态SPA模式下可正常工作。

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