当 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
页面将用于渲染发生的任何其他错误。
1
2
<h1>home</h1>