SvelteKit中如何从具体路由调用父级+page.js？

SvelteKit 里父路由的 +page.js 只会在访问对应父路径（比如 /）时执行，子路由（比如 /products）不会自动触发父级的 +page.js——哪怕子路由没有自己的 +page.js，这是因为 +page.js 是和具体页面绑定的，而非全局共享的逻辑载体。

针对你的需求，有几种可行的解决办法：

1. 将逻辑迁移到父级 +layout.js #

如果父级 +page.js 里的逻辑是所有子路由都需要执行的，最直接的方式是把代码移到根目录的 +layout.js 中：

// src/routes/+layout.js
export async function load(event) {
  // 这里放原来+page.js里的逻辑
  const data = await fetchSomeData();
  return { data };
}

+layout.js 的 load 函数会在所有子路由加载时自动执行，包括 /products，而且数据会通过布局传递给子页面。

2. 在子路由中手动调用父级逻辑 #

如果只想让特定子路由（比如 /products）触发父级逻辑，可以在子路由的 +page.js 中手动导入并执行父级的 load 函数：

// src/routes/products/+page.js
import { load as rootLoad } from '../+page.js';

export async function load(event) {
  // 调用父级load逻辑
  const rootData = await rootLoad(event);
  // 可选：添加/products页面自己的逻辑
  const productData = await fetchProductData();
  return { ...rootData, productData };
}

3. 抽离共享逻辑到独立模块 #

如果父级逻辑需要在多个地方复用，建议把逻辑抽成单独的工具函数，放在 src/lib 目录下：

// src/lib/loadRootData.js
export async function loadRootData(event) {
  // 原来+page.js里的逻辑
  return await fetchSomeData();
}

然后在父级 +page.js 和子路由的 +page.js 中分别导入调用：

// src/routes/+page.js
import { loadRootData } from '$lib/loadRootData.js';

export async function load(event) {
  const data = await loadRootData(event);
  return { data };
}

// src/routes/products/+page.js
import { loadRootData } from '$lib/loadRootData.js';

export async function load(event) {
  const rootData = await loadRootData(event);
  // 子路由自己的逻辑
  return { rootData };
}

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