SvelteKit中如何实现子路由向父layout传递面包屑数据？

针对原生JS Store无响应式的问题，推荐两种贴合SvelteKit生态的实现方案：

方案一：利用Svelte官方响应式Store #

1. 创建面包屑Store #

在src/lib/stores/breadcrumbs.ts中定义响应式Store：

import { writable } from 'svelte/store';

export interface BreadcrumbItem {
  label: string;
  href: string;
}

export const breadcrumbs = writable<BreadcrumbItem[]>([]);

2. 子路由（含[...rest]）更新面包屑 #

在子路由的+page.svelte中，结合$page store解析动态路由参数，更新面包屑：

<script lang="ts">
  import { breadcrumbs } from '$lib/stores/breadcrumbs';
  import { page } from '$app/stores';
  import { onMount } from 'svelte';

  onMount(() => {
    // 解析通配符路由的rest参数
    const pathSegments = $page.params.rest?.split('/') || [];
    const crumbItems = [
      { label: '首页', href: '/' },
      { label: '文件夹', href: '/folders' },
      // 动态生成通配符路由对应的面包屑项
      ...pathSegments.map((segment, idx) => {
        const itemHref = `/folders/${pathSegments.slice(0, idx + 1).join('/')}`;
        return { label: segment, href: itemHref };
      })
    ];

    breadcrumbs.set(crumbItems);

    // 组件销毁时重置（可选，根据业务需求调整）
    return () => breadcrumbs.set([]);
  });
</script>

3. 顶层Layout渲染面包屑 #

在根+layout.svelte中订阅Store并渲染：

<script lang="ts">
  import { breadcrumbs } from '$lib/stores/breadcrumbs';
</script>

<nav class="breadcrumbs">
  {#each $breadcrumbs as item, index}
    <a href={item.href}>{item.label}</a>
    {#if index < $breadcrumbs.length - 1}
      <span class="separator">/</span>
    {/if}
  {/each}
</nav>

<slot />

方案二：基于SvelteKit路由Load函数传递数据 #

该方案无需额外维护Store，利用SvelteKit原生的路由数据传递机制，天然具备响应式：

1. 根Layout加载基础面包屑 #

在src/routes/+layout.ts中定义根级面包屑：

import type { LayoutLoad } from './$types';

export const load: LayoutLoad = async ({ parent }) => {
  const parentData = await parent();
  return {
    breadcrumbs: parentData.breadcrumbs || [{ label: '首页', href: '/' }]
  };
};

2. 子Layout追加面包屑 #

在src/routes/folders/+layout.ts中追加文件夹层级的面包屑：

import type { LayoutLoad } from './$types';

export const load: LayoutLoad = async ({ parent }) => {
  const parentData = await parent();
  return {
    breadcrumbs: [...parentData.breadcrumbs, { label: '文件夹', href: '/folders' }]
  };
};

3. 通配符路由动态生成面包屑 #

在src/routes/folders/[...rest]/+page.ts中解析动态参数，生成对应面包屑项：

import type { PageLoad } from './$types';

export const load: PageLoad = async ({ parent, params }) => {
  const parentData = await parent();
  const pathSegments = params.rest?.split('/') || [];
  
  const dynamicCrumbs = pathSegments.map((segment, idx) => {
    const itemHref = `/folders/${pathSegments.slice(0, idx + 1).join('/')}`;
    return { label: segment, href: itemHref };
  });

  return {
    breadcrumbs: [...parentData.breadcrumbs, ...dynamicCrumbs]
  };
};

4. 顶层Layout渲染面包屑 #

直接通过data属性获取面包屑数据并渲染：

<script lang="ts">
  export let data;
</script>

<nav class="breadcrumbs">
  {#each data.breadcrumbs as item, index}
    <a href={item.href}>{item.label}</a>
    {#if index < data.breadcrumbs.length - 1}
      <span class="separator">/</span>
    {/if}
  {/each}
</nav>

<slot />

方案对比 #

• Store方案：灵活性更高，适合需要在组件内部（如用户交互后）动态修改面包屑的场景。
• Load函数方案：完全贴合SvelteKit路由设计，数据在路由加载阶段完成准备，无需额外维护状态，更适合路由级别的静态/动态面包屑需求。

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