面试题：SvelteKit页面路由之基础解析

Question

在SvelteKit中，如何创建一个基本的页面路由？请描述其目录结构及路由定义方式，并举例说明如何创建一个简单的嵌套路由。

Answer 1

1. 创建基本页面路由

目录结构

在SvelteKit项目中，src/routes目录用于定义路由。每个文件或目录对应一个路由。例如，要创建一个首页路由，在src/routes目录下创建一个index.svelte文件。

路由定义方式

SvelteKit通过文件系统约定来定义路由。src/routes目录下的每个.svelte文件都会自动成为一个路由。例如，src/routes/about.svelte会成为/about路由。

2. 简单嵌套路由示例

目录结构

假设我们要创建一个博客文章的嵌套路由。首先在src/routes目录下创建一个blog目录，然后在blog目录下创建[slug].svelte文件。这里[slug]是动态参数，表示文章的唯一标识。

src/
└── routes/
    └── blog/
        └── [slug].svelte

路由定义及使用

[slug].svelte文件内容示例：

<script>
    import { page } from '$app/stores';
    const { slug } = $page.params;
</script>

<h1>{slug}的文章</h1>

在这个例子中，$page.params.slug可以获取到动态参数的值。当用户访问/blog/hello-world时，slug的值就是hello-world 。