SvelteKit：如何创建通用+page.server.js，优先页面特定文件实现路由复用

SvelteKit本身没有直接支持全局通用+page.server.js的路由约定，但可以通过以下两种方案实现你的需求：

方案一：利用根布局服务器文件（适合页面加载时的通用逻辑） #

如果你的通用逻辑是页面加载时执行（比如提交当前路径到API），可以把逻辑放在**根目录的+layout.server.js**中，结合路由判断跳过已有特定文件的页面：

// src/routes/+layout.server.js
// 预加载所有路由下的+page.server.js文件
const pageServerModules = import.meta.globEager('/src/routes/**/+page.server.js');

export async function load({ url, route }) {
  // 拼接当前路由对应的+page.server.js路径
  const currentPageServerPath = `/src/routes${route.id}/+page.server.js`;

  // 仅当当前页面没有自定义+page.server.js时，执行通用逻辑
  if (!pageServerModules[currentPageServerPath]) {
    // 向API提交当前路径的逻辑
    await fetch('你的API接口地址', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ path: url.pathname })
    });
  }

  return {};
}

这个方案的核心是：

• 根布局的load函数会在所有页面加载时触发
• 通过import.meta.globEager预加载所有自定义的+page.server.js，判断当前路由是否存在该文件，从而决定是否执行通用逻辑

方案二：抽离通用逻辑为模块（适合需要自定义页面复用部分逻辑的场景） #

如果部分自定义页面需要复用通用逻辑，同时保留自己的扩展，可以把通用代码抽成独立模块：

1. 创建通用模块文件：

// src/lib/server/common-page-logic.js
export async function submitPagePath(url) {
  await fetch('你的API接口地址', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ path: url.pathname })
  });
}

// 如果有通用actions也可以在这里定义
export const commonActions = {
  default: async ({ url }) => {
    await submitPagePath(url);
    return { success: true };
  }
};

2. 在需要自定义的页面中导入复用：

// src/routes/about/+page.server.js
import { submitPagePath } from '$lib/server/common-page-logic';

export async function load({ url }) {
  // 先执行通用逻辑，再添加自定义逻辑
  await submitPagePath(url);
  // 你的自定义加载逻辑
  return { pageData: 'about page data' };
}

而没有自定义+page.server.js的页面，会自动使用方案一中的根布局通用逻辑。

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