SvelteKit 最新中文文档教程（2）—— 路由

最新推荐文章于 2025-11-06 11:47:37 发布

原创

最新推荐文章于 2025-11-06 11:47:37 发布 · 983 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #前端框架 #vue.js #react

前言

Svelte，一个语法简洁、入门容易，面向未来的前端框架。

从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目。

为了帮助大家学习 Svelte，我同时搭建了 Svelte 最新的中文文档站点。

如果需要进阶学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。

路由

SvelteKit 的核心是一个基于文件系统的路由器。应用程序的路由（即用户可以访问的 URL 路径）由代码库中的目录定义：

src/routes 是根路由
src/routes/about 创建一个 /about 路由
src/routes/blog/[slug] 创建一个带有参数 slug 的路由，当用户请求类似 /blog/hello-world 的页面时，可以用它动态加载数据

[!NOTE] 您可以通过编辑项目配置来将 src/routes 更改为其他目录。

每个路由目录包含一个或多个路由文件，这些文件可以通过它们的 + 前缀识别。

我们稍后会更详细地介绍这些文件，但这里有几个简单的规则可以帮助您记住 SvelteKit 的路由是如何工作的：

所有文件都可以在服务端上运行
除了 +server 文件外，所有文件都在客户端运行
+layout 和 +error 文件不仅适用于它们所在的目录，也适用于子目录

+page

+page.svelte

+page.svelte 组件定义了您应用程序的一个页面。默认情况下，页面在初始请求时在服务端渲染（SSR），在后续导航时在浏览器中渲染（CSR）。

<!--- file: src/routes/+page.svelte --->
<h1>您好，欢迎来到我的网站！</h1>
<a href="/https/blog.csdn.net/about">关于我的网站</a>

<!--- file: src/routes/about/+page.svelte --->
<h1>关于本站</h1>
<p>待办...</p>
<a href="/">首页</a>

页面可以通过 data 属性接收来自 load 函数的数据。

<!--- file: src/routes/blog/[slug]/+page.svelte --->
<script>
	/** @type {
  
  { data: import('./$types').PageData }} */
	let { data } = $props();
</script>

<h1>{data.title}</h1>
<div>{@html data.content}</div>

[!遗留模式]
在 Svelte 4 中，您需要使用 export let data 代替

[!NOTE] SvelteKit 使用 <a> 元素在路由之间导航，而不是框架特定的 <Link> 组件。

+page.js

通常，页面在渲染之前需要加载一些数据。为此，我们添加一个 +page.js 模块，该模块导出一个 load 函数：

/// file: src/routes/blog/[slug]/+page.js
import {
   
    error } from '@sveltejs/kit';

/** @type {import('./$types').PageLoad} */
export function load({
    
     params }) {
   
   
	if (params.slug === 'hello-world') {
   
   
		return {
   
   
			title: 'Hello world!',
			content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
		};
	}

	error(404, 'Not found');
}

这个函数与 +page.svelte 一起运行，这意味着它在服器端渲染期间在服务端上运行，在客户端导航期间在浏览器中运行。有关该 API 的完整详细信息，请参见 load。

除了 load，+page.js 还可以导出一些值用于配置页面行为：

export const prerender = true 或 false 或 'auto'
export const ssr = true 或 false
export const csr = true 或 false

您可以在页面选项中找到更多相关信息。

+page.server.js

如果您的 load 函数只能在服务端上运行（例如，如果它需要从数据库获取数据或需要访问私有环境变量，如 API 密钥），那么您可以将 +page.js 重命名为 +page.server.js，并将 PageLoad 类型更改为 PageServerLoad。

/// file: src/routes/blog/[slug]/+page.server.js

// @filename: ambient.d.ts
declare global {
   
   
  const getPostFromDatabase: (

最低0.47元/天解锁文章