路由在Web开发世界中起着至关重要的作用，从而允许在应用程序中的各个页面或视图之间进行无缝导航。在此博客文章中，我们将通过视觉指南探索Sveltekit的路由功能。
入门
使用终端中的以下命令开始，创建并运行一个新的Sveltekit项目：
npm create svelte@latest routing-app
cd my-app
npm install
npm run dev
在您首选的代码编辑器中打开项目，然后扩展src文件夹。要重新开始，请删除routes文件夹以创建从头开始的路由。
路由约定
Sveltekit采用了基于文件系统的路由机制，其中浏览器中的URL路径由代码库中的文件和文件夹确定。遵循约定对于适当的路由功能至关重要。让我们讨论并理解不同的惯例。
创建路线
要为根URL创建路由（localhost:5173），请按照以下步骤：
- 创建一个
src/routes文件夹。 - 在
routes文件夹中，创建一个page.svelte文件。此文件代表路由。 - 在
page.svelte文件中定义一个简单的Svelte组件，以表示“家庭”页面：
<h1>Welcome home!</h1>
通过遵循这些约定，我们成功地创建了第一条路线。打开您的浏览器，然后导航到localhost:5173，查看“欢迎回家！”消息。
视觉表现
添加其他路线
现在，让我们继续创建另外两条路线：一个用于 about 页面，另一个用于 profile page。
- 创建一个
src/routes/about文件夹。 - 在
about文件夹中，创建一个page.svelte文件。此文件代表路由。 - 在
page.svelte文件中定义最小的svelte组件以表示 about page：
<h1>About me</h1>
- 类似地，创建一个
src/routes/profile文件夹。 - 在
profile文件夹中，创建一个page.svelte文件。此文件代表路由。 - 在
page.svelte文件中定义一个简单的Svelte组件以表示 profile 页面：
<h1>My profile</h1>
当您访问root URL时，localhost:5173时，主页仍然=显示。但是，如果您导航到localhost:5173/about，则关于我页面显示。同样，将URL更改为/profile呈现我的个人资料 page。
这表明路由与基于routes文件夹中包含的文件夹名称的文件关联。 about文件夹中的page.svelte文件对应于/about，而profile文件夹中的page.svelte文件对应于/profile。
视觉表现
嵌套路线
除了基本路线外，Sveltekit还为嵌套路线提供支持，因此您可以在应用程序中建立层次结构。当用户导航到url localhost:5173/blog时，让我们的目标是渲染页面。此外，我们需要为localhost:5173/blog/first和localhost:5173/blog/second渲染页面。
要实现嵌套路线，请执行以下步骤：
- 创建一个
src/routes/blog文件夹。 - 在
blog文件夹中，为主博客页面创建一个page.svelte文件：
<h1>My blog</h1>
- 导航到
localhost:5173/blog查看我的博客 page。 - 要实现
/blog/first和/blog/second路由，请在src/routes/blog/first和src/routes/blog/second文件夹中创建page.svelte文件：
// blog/first/page.svelte
<h1>First blog post</h1>
// blog/second/page.svelte
<h1>Second blog post</h1>
现在，导航到localhost:5173/blog/first显示了第一篇博客文章，而localhost:5173/blog/second显示了第二篇博客文章。
通过创建嵌套文件夹结构，Sveltekit可以自动将文件相应地路由。这简化了创建嵌套路由并增强应用程序的组织和结构的过程。
视觉表现
动态路线
像/blog/first和/blog/second这样的预定义路径可能并不总是适合具有数百条路线的复杂应用。 Sveltekit支持动态路线来处理此类情况。让我们创建动态路由以处理产品列表和详细页面。
要创建动态路线，请按照以下步骤：
- 创建一个
src/routes/products文件夹。 - 在
products文件夹中，创建一个page.svelte文件以显示三个产品的列表：
<h1>Product List</h1>
<h2>Product 1</h2>
<h2>Product 2</h2>
<h2>Product 3</h2>
- 通过在浏览器中导航到
localhost:5173/products，显示的产品列表。 - 对于详细信息页面，在
products文件夹中，创建一个名为[productId]的新文件夹。方括号表示动态路线段。 - 在
[productId]文件夹中，创建一个page.svelte文件：
<h1>Details about the product</h1>
现在，当您导航到localhost:5173/products/1时，“产品详细信息”页面显示。同样，访问/products/2，/products/3甚至/products/100都会显示相同的详细信息页面。 [productId]是可以容纳1、2、3等值的动态路线段。
要显示特定的产品ID，您可以使用Sveltekit的stores模块。修改组件如下：
<script>
import {page} from '$app/stores';
const productId = $page.params.productId;
</script>
<h1>Product {productId} details</h1>
现在，当您导航到localhost:5173/products/1时，有关产品1显示的详细信息。同样，访问/products/100将显示有关产品100的详细信息。
在任何UI应用程序中实现列表详细模式时，动态路线都是有益的。通过了解如何在Sveltekit中创建动态路线，您可以构建适合不同用户交互的灵活和可扩展应用程序。
视觉表现
嵌套的动态路线
在上一节中，我们了解了动态路线。现在，让我们进一步探索嵌套的动态路线。
复杂的应用程序通常需要多个动态路线段。例如，当导航到/products/1时，用户期望产品1的详细信息1.同样，访问/products/1/reviews/1应该显示该产品的第一个评论。让我们找出我们如何实现这一目标。
要创建嵌套动态路线，请按照以下步骤：
- 创建一个
src/routes/products/[productId]/reviews文件夹。这种结构将我们带到路线/products/productid/评论。但是，我们还需要一个动态的reviewId。 - 在
reviews文件夹中，创建一个名为[reviewId]的新文件夹。再次，方括号表示动态路线段。 - 在
[reviewId]文件夹中，创建一个page.svelte文件，我们将在其中定义一个Svelte组件以显示productId和reviewId。
<script>
import { page } from "$app/stores";
const { productId, reviewId } = $page.params;
</script>
<h1>Review {reviewId} for product {productId}</h1>
现在，如果我们在浏览器中导航到localhost:5173/products/1/reviews/1，则会显示预期的文本。同样，导航到productId 100和reviewId 5反映了UI中的相应ID。
本节的关键要点是，可以通过在文件夹名称中具有动态段来创建嵌套的动态路由。
视觉表现
捕捉所有路线
sveltekit提供了允许灵活路由的捕获路由功能。假设我们想创建一个具有多个功能和概念的文档网站，每个概念都有自己独特的路线。我们可以使用All All路线，而不是为每个路线创建单独的文件。
要实现一条全部路线，请按照以下步骤：
- 创建一个
src/routes/docs文件夹。 - 在
docs文件夹中，创建一个由Sveltekit识别的特殊名称的文件夹。使用方括号和三个点（例如，[...slug]）包含您选择的名称。 - 在
slug文件夹中，创建一个带有代表文档主页的基本svelte组件的page.svelte文件。
<h1>Docs home page</h1>
- 要访问URL中的不同段，请依靠Sveltekit提供的商店模块。例如：
localhost:5173/docs/routing/catch-all-segments可以呈现以下组件：
<script>
import {page} from '$app/stores';
const slugArr = $page.params.slug.split('/')
</script>
{#if slugArr.length === 1}
<h1>Viewing docs for feature {slugArr[0]}</h1>
{:else if slugArr.length === 2}
<h1>Viewing docs for feature {slugArr[0]} and concept {slugArr[1]}</h1>
{/if}
有了全部的段，您可以为路线创建层次结构，允许更好的组织和SEO，同时重用一个为URL不同变化的单个文件。这种方法对于文档网站特别有用。
视觉表现
结论
路由是Web开发的组成部分，因此用户可以在应用程序中的不同页面之间导航。 Sveltekit通过其基于文件系统的路由机制简化了路由。
在这篇博客文章中，我们探讨了Sveltekit中路由的基础知识。我们讨论了路由约定，为不同方案创建了路由，并突出了Sveltekit的惯例公约，以进行路由。
。使用Sveltekit，您可以通过利用代码库的文件和文件夹结构来轻松定义和管理路线，从而消除了对其他路由配置的需求。