路由

约 1212 字大约 4 分钟

2026-09-21

分组

你可以使用 () 来对路由进行分组, 这样就可以把路由分组到一起, 但是不会影响路由的路径.

/(app)/dashboard /(otherapp)/dashboard2 这样就可以把 dashboard 和 dashboard2 分组到两个地方, 主要而已让两个分组下的内容有不同的 +layout.svelte 但是路由的路径还是 /dashboard 和 /dashboard2.

页面

svelte-kit 的路由是基于文件系统的, 也就是路由的路径和文件的路径是一一对应的.

有两个特殊文件 +layout.svelte 和 +page.svelte, 其中 +layout.svelte 是布局文件, 用来定义页面的公共部分, 而 +page.svelte 是页面文件, 用来定义页面的内容.

如果在 /about 中有一个 +layout.svelte 文件, 那么这个布局文件会应用到 /about 及其子路由中, 也就是 /about/* 中的所有路由都会使用这个布局文件.

我们还能使用 +error.svelte 文件来定义错误页面, 这个文件会在路由发生错误时显示, 比如 404 页面.

<!-- +error.svelte -->
<script lang="ts">
	import { page } from '$app/state';
</script>

<h1>{page.status}: {page.error.message}</h1>

数据

一般页面中还会使用到一些数据, 这些数据可以通过 load 函数来获取, load 函数是一个特殊的函数, 用来在页面加载时获取数据.

除了普通的 +page.ts 文件, 还可以使用 +page.server.ts 文件来获取数据, 这个文件是一个特殊的文件, 用来在服务器端获取数据.

如果使用 +page.ts 文件来获取数据, 那么这个文件会在客户端和服务器端都执行, 而 +page.server.ts 文件只会在服务器端执行.

所以如果有敏感信息或有对数据库进行操作的内容, 必须使用 +page.server.ts 文件来获取数据, 这样可以保证这些内容不会暴露在客户端.

如果使用了 +layout.ts 只需要把函数的类型换成 LayoutLoad 就可以了, 其他的和 +page.ts 文件是一样的.

/src/routes/post/+page.svelte

<script lang="ts">
  const {data} = $props();
</script>

{data.title}

/src/routes/post/+page.ts

import type { PageLoad } from './$types'
import { error } from '@sveltejs/kit'

export const load: PageLoad = ({ url }) => {
  if (url.hash === '#success') {
    return {
      title: 'Hello world!',
      content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
    }
  }

  throw error(404, 'Not found')
}

/src/routes/post/+page.server.ts

import type { PageServerLoad } from './$types'
import { error } from '@sveltejs/kit'

export const load: PageServerLoad = async ({ url }) => {
  if (url.hash === '#success') {
    return {
      title: 'Hello world!',
      content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
    }
  }

  throw error(404, 'Not found')
}

接口

我们除了一些页面，我们有的时候还会需要暴露一些接口出去, 这些接口可以通过 +server.ts 文件来定义, 这个文件是一个特殊的文件, 用来在服务器端定义接口.

不过有一个限制，就是页面和接口不能同时存在。

除了可以使用 json 还可以使用 redirect 等辅助函数来返回一些特殊的响应, 这些辅助函数都是从 @sveltejs/kit 中导入的.

可以通过 GET, POST 等通用的 HTTP 方法来定义接口, 这些方法都是 RequestHandler 类型的函数, 用来处理请求和响应.

当然还有一个特殊的路由，叫做 FALLBACK, 如果请求的路由没有匹配到接口，那么就会匹配到 FALLBACK 路由.

// +server.ts
import { json, type RequestHandler } from '@sveltejs/kit'

export const GET: RequestHandler = async () => {
  return json({ message: 'Hello from the server!' }, { status: 200 })
}

高级路由

比如可选路由 /[org]/[repo]/tree/[...file] 可以获取到路由中的参数, 这些参数可以通过 params 对象来获取, 这个对象是一个普通的对象, 用来存储路由中的参数.

<script lang="ts">
	const { params } = $props();
</script>

{JSON.stringify(params)}
<!-- {"page":"aaa","file":"aaa/vbbb/ccc"} -->

matchers

在高级路由中, 我们可以定义这一块路由是一个变量, 但是我们无法限制里面的内容是什么, 这时候我们就可以使用 matchers 来定义这一块路由的内容, 这样就可以限制里面的内容是符合我们定义的规则的.

我们需要在 /src/params 下创建我们的规则文件

/src/params/fruit.ts

import type { ParamMatcher } from '@sveltejs/kit'

export const match = ((param: string): param is ('apple' | 'orange') => {
  return param === 'apple' || param === 'orange'
}) satisfies ParamMatcher

我们就可以在路由中定义成 /[aa=fruit]/list 这样就可以限制这一块路由的内容是 apple 或者 orange, 如果不是这两个值就会匹配不到路由.

这里的 aa 就是读取的时候的变量名, fruit 就是我们定义的规则文件名, 也就是 /src/params/fruit.ts 文件.

错误页面

在每一级下都可以有 +error.svelte 文件, 这个文件会在路由发生错误时显示, 比如 404 页面.

<script lang="ts">
	import { page } from '$app/state';
</script>

<div>
	{JSON.stringify(page)}

	<!-- <h1>{page.status}</h1>
	<p>{page.error?.message ?? '发生了未知错误'}</p> -->

	<a href="/">返回首页</a>
</div>