Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

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

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

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

src/routes/about/+page
<nav>
	<a href="/">首页</a>
	<a href="/about">关于</a>
</nav>

<h1>关于</h1>
<p>这是关于页面。</p>

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

与传统的多页面应用不同,导航到 /about 和返回只会更新当前页面的内容,就像单页应用程序一样。这给我们带来了两个优点 —— 快速的服务端渲染启动,然后是即时导航。(这个行为是可以配置的。)

在 GitHub 编辑此页面

上一页 下一页
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>