SvelteKit实现所有可变路由统一指向同一个+page.server.ts的方法

要让/a、/a/b、/a/b/c这些路径都触发同一个+page.server.ts的load函数，同时正确获取带默认空字符串的参数，你需要调整路由结构，利用SvelteKit的可选动态路由段特性，具体步骤如下：

1. 调整路由文件夹结构 #

不需要创建固定的first/second/third文件夹，而是用可选动态参数文件夹（命名格式为[param?]）构建嵌套路由：

/routes
  [first?]
    [second?]
      [third?]
        +page.server.ts
        +page.svelte

2. 编写+page.server.ts逻辑 #

在[first?]/[second?]/[third?]/+page.server.ts中写入load函数，对未提供的参数默认设为空字符串：

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

export const load = (async ({ params }) => {
  console.log('Logging in +page.server.ts');
  
  // 处理可选参数，未提供则转为空字符串
  const formattedParams = {
    first: params.first ?? '',
    second: params.second ?? '',
    third: params.third ?? ''
  };
  
  console.log(formattedParams);
  return formattedParams;
}) satisfies PageServerLoad;

3. （可选）让根路径/也触发该逻辑 #

如果需要根路径/也执行相同的load函数，可以通过共享函数实现：
首先创建共享加载函数文件/lib/shared-load.ts：

import type { PageServerLoad } from '$types';

export const sharedLoad: PageServerLoad = async ({ params }) => {
  console.log('Logging in +page.server.ts');
  
  const formattedParams = {
    first: params.first ?? '',
    second: params.second ?? '',
    third: params.third ?? ''
  };
  
  console.log(formattedParams);
  return formattedParams;
};

然后在根目录的+page.server.ts中导入复用：

import { sharedLoad } from '$lib/shared-load';
import type { PageServerLoad } from './$types';

export const load = sharedLoad satisfies PageServerLoad;

同时修改[first?]/[second?]/[third?]/+page.server.ts也导入该共享函数即可。

效果验证 #

• 访问/a，控制台输出：

  {
    first: 'a',
    second: '',
    third: ''
  }
  

• 访问/a/b，控制台输出：

  {
    first: 'a',
    second: 'b',
    third: ''
  }
  

• 访问/a/b/c，控制台输出：

  {
    first: 'a',
    second: 'b',
    third: 'c'
  }
  

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