路由

约 754 字大约 3 分钟

2026-09-21

页面

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 })
}