SvelteKit中如何从任意路由向主布局传递数据？

方案1：利用页面组件导出的配置结合$page存储 #

这是轻量且贴合SvelteKit特性的方式，无需全局状态。

1. 在目标页面（如route1/+page.svelte）中直接导出当前页面的侧边栏配置：

<script>
  // 定义当前页面专属的侧边栏配置
  export const sidebarConfig = {
    items: [
      { label: "Route1 选项1", href: "/route1/option1" },
      { label: "Route1 选项2", href: "/route1/option2" }
    ]
  };
</script>

<!-- 页面内容 -->
<h1>Route1 页面</h1>

2. 在+layout.svelte中通过$page获取当前页面组件的导出内容：

<script>
  import { page } from '$app/stores';
  let sidebarConfig = { items: [] };

  $: {
    const currentPageComponent = $page.route.component;
    // 若页面有导出配置则替换默认值
    if (currentPageComponent.sidebarConfig) {
      sidebarConfig = currentPageComponent.sidebarConfig;
    }
  }
</script>

<div class="layout-container">
  <Sidebar {sidebarConfig} />
  <main>
    <slot />
  </main>
</div>

方案2：通过页面load函数传递配置 #

如果侧边栏配置需要异步获取（比如从接口拉取），可以结合SvelteKit的数据加载流程：

1. 在页面的+page.js或+page.server.js中返回侧边栏配置：

// route2/+page.js
export function load() {
  return {
    sidebarConfig: {
      items: [
        { label: "Route2 异步选项", href: "/route2/async-item" }
      ]
    }
  };
}

2. 在+layout.svelte中通过data接收配置：

<script>
  export let data;
  // 设置默认配置，避免页面未提供时出错
  const defaultConfig = { items: [] };
  $: sidebarConfig = data.sidebarConfig || defaultConfig;
</script>

<div class="layout-container">
  <Sidebar {sidebarConfig} />
  <main>
    <slot />
  </main>
</div>

方案3：路由路径映射配置 #

如果侧边栏配置和路由路径强绑定，可直接在布局中根据当前路由匹配：

<script>
  import { page } from '$app/stores';
  // 预定义路由与侧边栏的映射关系
  const routeSidebarMap = {
    "/route1": {
      items: [/* Route1的侧边栏项 */]
    },
    "/route2": {
      items: [/* Route2的侧边栏项 */]
    }
  };

  $: sidebarConfig = routeSidebarMap[$page.url.pathname] || { items: [] };
</script>

<div class="layout-container">
  <Sidebar {sidebarConfig} />
  <main>
    <slot />
  </main>
</div>

方案选型参考 #

• 方案1：适合静态配置，无需异步，直接在页面中定义，简单直观
• 方案2：适配异步场景，和SvelteKit数据加载流程深度结合
• 方案3：适合路由与侧边栏一一对应的场景，无需修改页面文件，维护更集中

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