Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

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

¥When something goes wrong inside a load function, SvelteKit renders an error page.

默认错误页面有些乏味。我们可以通过创建 src/routes/+error.svelte 组件来自定义它:

¥The default error page is somewhat bland. We can customize it by creating a src/routes/+error.svelte component:

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 边界:

¥Notice that the +error.svelte component is rendered inside the root +layout.svelte. We can create more granular +error.svelte boundaries:

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

此组件将为 /expected 渲染,而根 src/routes/+error.svelte 页面将为发生的任何其他错误渲染。

¥This component will be rendered for /expected, while the root src/routes/+error.svelte page will be rendered for any other errors that occur.

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