如何在SvelteKit中复用嵌套子路由以避免代码重复？

核心思路 #

将比赛相关的嵌套路由逻辑（包括布局、页面、子标签页）封装为独立可复用模块，在需要的父路由下仅创建极简的路由文件，通过导入共享模块实现路由结构复用，同时保留父路由的专属布局能力。

具体实现步骤 #

1. 封装可复用的比赛路由模块 #

在$lib/features/match目录下构建完整的比赛嵌套路由逻辑，所有核心代码集中于此：

• +layout.svelte：比赛页面的基础布局（包含标签页导航、通用容器等）
• +page.svelte：比赛主页的核心内容
• stats/+page.svelte：数据统计标签页内容
• lineups/+page.svelte：首发阵容标签页内容
• match.server.js：封装通用的服务端数据加载逻辑（如获取比赛详情、统计数据）

示例match.server.js：

export async function loadMatchData(matchId) {
  // 通用比赛数据获取逻辑
  const res = await fetch(`https://api.example.com/matches/${matchId}`);
  return await res.json();
}

2. 在目标父路由下创建复用路由结构 #

以/dailies/match/{matchId}为例，在src/routes/dailies/match/[matchId]目录下创建以下文件：

+layout.svelte（保留父路由专属布局）

<script>
  import MatchLayout from '$lib/features/match/+layout.svelte';
</script>

<!-- 添加/dailies路由专属布局元素，比如顶部导航、侧边栏 -->
<div class="dailies-layout">
  <MatchLayout />
</div>

+page.server.js（复用数据加载逻辑，可添加父路由专属逻辑）

import { loadMatchData } from '$lib/features/match/match.server.js';

export async function load({ params }) {
  // 可在此添加/dailies专属的数据过滤或增强逻辑
  const matchData = await loadMatchData(params.matchId);
  return { matchData };
}

+page.svelte（复用比赛主页内容）

<script>
  import MatchPage from '$lib/features/match/+page.svelte';
  export let data;
</script>

<MatchPage {data} />

3. 复用嵌套子路由（标签页） #

对于/dailies/match/{matchId}/stats这类子路由，在src/routes/dailies/match/[matchId]/stats目录下创建+page.svelte：

<script>
  import MatchStatsPage from '$lib/features/match/stats/+page.svelte';
  export let data;
</script>

<MatchStatsPage {data} />

重复上述步骤，即可在/live/feed/match/{matchId}等其他父路由下快速复用整套嵌套路由结构。

方案优势 #

• 维护成本低：核心逻辑集中在共享模块，修改一次所有路由生效；新增父路由仅需创建少量导入文件
• 保留专属能力：每个父路由可自定义布局和数据逻辑，不丢失原有路由的专属特性
• 符合SvelteKit规范：基于文件系统路由，结构清晰，可读性强

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