面试题：SvelteKit中嵌套路由的基础实现

Question

请描述在SvelteKit中如何创建一个简单的嵌套路由结构。假设我们有一个博客应用，有文章列表页，每个文章详情页是列表页的嵌套路由，应该如何配置和实现相关的路由文件结构以及页面逻辑？

Answer 1

1. 路由文件结构：

   • 在SvelteKit项目中，路由基于src/routes目录。
   • 创建src/routes/blog目录，用于存放博客相关路由。
   • 在src/routes/blog目录下，创建index.svelte文件，这个文件将作为文章列表页。
   • 再在src/routes/blog目录下创建一个名为[slug].svelte的文件，[slug]是动态参数，用于表示每篇文章的唯一标识，这个文件将作为文章详情页，实现嵌套路由。

2. 页面逻辑：

   • 文章列表页（src/routes/blog/index.svelte）：

<script>
    // 假设从API获取文章列表数据
    const fetchPosts = async () => {
        const response = await fetch('/api/posts');
        const data = await response.json();
        return data;
    };
    const posts = await fetchPosts();
</script>

<ul>
    {#each posts as post}
        <li>
            <a href={`/blog/${post.slug}`}>{post.title}</a>
        </li>
    {/each}
</ul>

• 文章详情页（src/routes/blog/[slug].svelte）：

<script context="module">
    export async function load({ params }) {
        const response = await fetch(`/api/posts/${params.slug}`);
        const post = await response.json();
        return { post };
    }
</script>

<script>
    export let data;
    const { post } = data;
</script>

<h1>{post.title}</h1>
<p>{post.content}</p>

这里假设后端有/api/posts接口返回文章列表，/api/posts/:slug接口返回特定文章详情。在实际应用中，你需要根据你的后端API进行调整。同时，SvelteKit还支持更多复杂的路由功能，如布局、加载器等，可根据项目需求进一步优化。