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

SvelteKit 使用基于文件系统的路由,这意味着你的应用的路由 - 换句话说,当用户导航到特定 URL 时应用应该做什么 - 由你的代码库中的目录定义。

¥SvelteKit uses filesystem-based routing, which means that the routes of your app — in other words, what the app should do when a user navigates to a particular URL — are defined by the directories in your codebase.

src/routes 中的每个 +page.svelte 文件都会在你的应用中创建一个页面。在这个应用中,我们目前有一个页面 — src/routes/+page.svelte,它映射到 /。如果我们导航到 /about,我们将看到 404 Not Found 错误。

¥Every +page.svelte file inside src/routes creates a page in your app. In this app we currently have one page — src/routes/+page.svelte, which maps to /. If we navigate to /about, we’ll see a 404 Not Found error.

让我们修复它。添加第二个页面 src/routes/about/+page.svelte,复制 src/routes/+page.svelte 的内容并更新它:

¥Let’s fix that. Add a second page, src/routes/about/+page.svelte, copy the contents of src/routes/+page.svelte, and update it:

src/routes/about/+page
<nav>
	<a href="/">home</a>
	<a href="/about">about</a>
</nav>

<h1>about</h1>
<p>this is the about page.</p>

我们现在可以在 //about 之间导航。

¥We can now navigate between / and /about.

与传统的多页应用不同,导航到 /about 并返回会更新当前页面的内容,就像单页应用一样。这为我们提供了两全其美的选择 - 快速的服务器渲染启动,然后是即时导航。(此行为可以是 configured。)

¥[!NOTE] Unlike traditional multi-page apps, navigating to /about and back updates the contents of the current page, like a single-page app. This gives us the best of both worlds — fast server-rendered startup, then instant navigation. (This behaviour can be configured.)

上一页 下一页
1
2
3
4
5
6
7
8
<nav>
	<a href="/">home</a>
	<a href="/about">about</a>
</nav>
 
<h1>home</h1>
<p>this is the home page.</p>