企业官网建设流程全解析

ppt免费模板哪个网站好,做图网站大学生兼职,wordpress 补丁,购买网站域名 空间在 SvelteKit 中#xff0c;routes/[...404]/page.svelte 这个页面是用来处理未匹配到的路由#xff08;即用户访问了一个在你的 routes 目录下没有定义的文件路径#xff09;。 如果你想在一个已经匹配到的路由#xff08;例如 routes/product/[id]/page.server.ts#…在 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 classnot-found-container h1404 - 页面未找到/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; } /style2. 创建或修改全局错误页面routes/error.svelte这个文件是关键它会捕获所有由throw error(...)抛出的错误并根据错误状态码来渲染不同的内容。!-- src/routes/error.svelte -- script langts 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 classerror-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); } /style3. 在你的 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}fromsveltejs/kit;importtype{PageServerLoad}from./$types;exportconstload:PageServerLoadasync({params}){constproductIdparams.id;// 模拟从数据库获取产品数据constproductawaitgetProductFromDatabase(productId);if(!product){// 如果产品不存在抛出 404 错误// SvelteKit 会捕获此错误并渲染 src/routes/error.sveltethrowerror(404,产品未找到);}// 如果产品存在正常返回数据return{product:product};};// 模拟数据库函数asyncfunctiongetProductFromDatabase(id:string){// 假设 non-existent 是一个不存在的 IDif(idnon-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。这种方法是最符合 SvelteKit 哲学的方式它分离了路由匹配、业务逻辑和错误呈现。