【Svelte】404页面的两种处理方式-育师

在 SvelteKit 中，routes/[...404]/+page.svelte这个页面是用来处理未匹配到的路由（即用户访问了一个在你的routes目录下没有定义的文件路径）。

如果你想在一个已经匹配到的路由（例如routes/product/[id]/+page.server.ts）中，根据业务逻辑（比如商品不存在）来显示这个 404 页面的内容，你需要利用 SvelteKit 的错误处理机制。

核心思想是：

在一个+page.server.ts或+page.ts文件中，当业务逻辑判断需要显示 404 时，抛出 SvelteKit 提供的error(404, 'Not Found')。
SvelteKit 会捕获这个错误，并寻找routes/+error.svelte文件来渲染错误页面。
在routes/+error.svelte文件中，你可以根据$page.status（从$app/stores导入）来判断是否为 404 错误，如果是，就导入并渲染你的routes/[...404]/+page.svelte组件。

下面是详细的步骤和代码示例：

1. 你的 404 页面（`routes/[...404]/+page.svelte`）

这个页面保持不变，它包含了你自定义的 404 错误内容。

<!-- src/routes/[...404]/+page.svelte --> <div class="not-found-container"> <h1>404 - 页面未找到</h1> <p>抱歉，您要查找的页面不存在。</p> <p>您可能想尝试搜索，或者返回<a href="/">主页</a>。</p> <!-- 你可以在这里添加更多内容，比如搜索框、最近文章等 --> </div> <style> .not-found-container { text-align: center; padding: 50px; background-color: #f8f8f8; border-radius: 8px; margin: 50px auto; max-width: 600px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } h1 { color: #e44d26; /* Svelte logo color */ font-size: 3em; margin-bottom: 20px; } p { font-size: 1.2em; color: #555; margin-bottom: 10px; } a { color: #e44d26; text-decoration: underline; } </style>

2. 创建或修改全局错误页面（`routes/+error.svelte`）

这个文件是关键，它会捕获所有由throw error(...)抛出的错误，并根据错误状态码来渲染不同的内容。

<!-- src/routes/+error.svelte --> <script lang="ts"> import { page } from '$app/stores'; // 导入你的特定 404 页面组件 // 注意：这里的路径是相对于当前 +error.svelte 文件的路径 // 如果你的 +error.svelte 在 src/routes/ 下， // 那么 [...]404 文件夹就在它的同级目录。 import NotFoundPage from './[...404]/+page.svelte'; </script> {#if $page.status === 404} <!-- 如果是 404 错误，渲染你自定义的 404 页面组件 --> <NotFoundPage /> {:else} <!-- 对于其他类型的错误，显示一个通用错误页面 --> <div class="error-container"> <h1>错误 {$page.status}</h1> <p>{$page.error?.message || '发生了一个未知错误。'}</p> <a href="/">返回主页</a> </div> {/if} <style> .error-container { text-align: center; padding: 50px; background-color: #fefefe; border-radius: 8px; margin: 50px auto; max-width: 600px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } </style>

3. 在你的 TS 文件中抛出 404 错误

现在，在任何需要根据业务逻辑显示 404 的+page.server.ts（或+page.ts）文件中，你可以抛出 404 错误。

例如，假设你有一个routes/product/[id]/+page.server.ts文件，你需要根据id从数据库加载产品，如果产品不存在，就显示 404。

// src/routes/product/[id]/+page.server.tsimport{error}from'@sveltejs/kit';importtype{PageServerLoad}from'./$types';exportconstload:PageServerLoad=async({params})=>{constproductId=params.id;// 模拟从数据库获取产品数据constproduct=awaitgetProductFromDatabase(productId);if(!product){// 如果产品不存在，抛出 404 错误// SvelteKit 会捕获此错误并渲染 src/routes/+error.sveltethrowerror(404,'产品未找到');}// 如果产品存在，正常返回数据return{product:product};};// 模拟数据库函数asyncfunctiongetProductFromDatabase(id:string){// 假设 'non-existent' 是一个不存在的 IDif(id==='non-existent'){returnnull;}// 模拟异步返回产品数据return{id,name:`产品${id}`,price:99.99};}

工作原理总结：

当用户访问http://localhost:5173/product/non-existent时。
SvelteKit 会匹配到src/routes/product/[id]/+page.server.ts。
在load函数中，getProductFromDatabase('non-existent')返回null。
if (!product)条件为真，throw error(404, '产品未找到')被执行。
SvelteKit 捕获到这个错误，并跳转到src/routes/+error.svelte页面。
在src/routes/+error.svelte中，$page.status的值为404。
{#if $page.status === 404}条件为真，它会渲染你导入的NotFoundPage组件。
最终，用户在浏览器中看到的是src/routes/[...404]/+page.svelte的内容，但 URL 仍然保持为/product/non-existent。