Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

load 函数内部出现错误时,SvelteKit 会渲染一个错误页面。

默认的错误页面看起来比较单调。我们可以通过创建 src/routes/+error.svelte 组件来自定义它:

src/routes/+error
<script>
	import { page } from '$app/state';
	import { emojis } from './emojis.js';
</script>

<h1>{page.status} {page.error.message}</h1>
<span style="font-size: 10em">
	{emojis[page.status] ?? emojis[500]}
</span>
<script lang="ts">
	import { page } from '$app/state';
	import { emojis } from './emojis.js';
</script>

<h1>{page.status} {page.error.message}</h1>
<span style="font-size: 10em">
	{emojis[page.status] ?? emojis[500]}
</span>

注意,+error.svelte 组件是在根 +layout.svelte 内部渲染的。我们可以创建更细粒度的 +error.svelte 边界:

src/routes/expected/+error
<h1>this error was expected</h1>

这个组件将用于渲染 /expected,而根目录的 src/routes/+error.svelte 页面将用于渲染发生的任何其他错误。

在 GitHub 编辑此页面

上一页 下一页
1
2
<h1>home</h1>