SvelteKit：如何进行基于slug的动态路由？

当使用 SvelteKit 开发 Web 应用时，创建基于 slug 的动态路由是一个常见的需求。这可以允许你根据 URL 中的参数（例如文章标题或产品ID）来显示不同的内容。下面我将会详细解释如何在 SvelteKit 中设置基于 slug 的动态路由。

步骤 1: 创建动态路由文件

在 SvelteKit 中，路由是通过文件系统来处理的。为了创建一个基于 slug 的动态路由，你需要在 src/routes 目录下创建一个以方括号包围的文件。比如，如果你想根据文章的 slug 来显示文章，你可以创建一个名为 [slug].svelte 的文件。

例如:

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

在这个结构中，任何形如 /blog/some-article-title 的 URL 都会被匹配到 blog/[slug].svelte 文件。

步骤 2: 读取和使用 slug 参数

在你的 [slug].svelte 文件中，你可以使用 SvelteKit 的 load 钩子来读取 slug 参数，并据此来获取数据。load 钩子是在服务器端运行的，非常适合进行数据获取操作。

svelte
<script context="module">
  export async function load({ params }) {
    const { slug } = params;

    const response = await fetch(`https://api.yoursite.com/articles/${slug}`);
    const article = await response.json();

    if (response.ok) {
      return {
        props: {
          article
        }
      };
    } else {
      return {
        status: response.status,
        error: new Error(`Could not load the article: ${slug}`)
      };
    }
  }
</script>

<script>
  export let article;
</script>

<article>
  <h1>{article.title}</h1>
  <div>{article.content}</div>
</article>

在上面的代码中，load 函数通过 params.slug 获取当前 URL 的 slug 部分，并用它来从一个 API 获取文章数据。然后，文章数据通过 props 传递给组件。

步骤 3: 处理加载错误

在实际应用中，处理错误也非常重要。在 load 函数中，如果请求发生错误，我们可以返回一个包含 HTTP 状态码和错误信息的对象，这样 SvelteKit 就能根据这些信息显示相应的错误页面。

总结

通过这种方式，你可以在 SvelteKit 应用中实现基于 slug 的动态路由，并能够根据不同的 URL slug 来显示不同的内容。这对于博客、产品详情页等场景非常有用。希望这个解释对你的面试有所帮助！如果还有任何问题，我很乐意继续讨论。