How do I do slug-based dynamic routing in SvelteKit?

在SvelteKit 中，实现基于 slug 的动态路由主要涉及两个步骤：创建一个动态路由文件和编写相应的逻辑来处理这个路由。

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

在 SvelteKit 中，路由是通过文件系统来进行的。具体来说，你需要在 src/routes 目录下创建一个以方括号包裹的文件或文件夹，这将表示一个动态段。例如，如果你想要根据文章的 slug 来创建一个路由，你可以创建一个名为 [slug].svelte 的文件。这个文件的路径可能看起来像这样：

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

在这个例子中，任何像 /articles/hello-world 这样的 URL 都会被映射到 articles/[slug].svelte 文件。

步骤 2: 在 Svelte 文件中处理动态路由

在 [slug].svelte 文件中，你可以使用 load 钩子来获取 slug 并据此加载相应的数据。load 钩子是一个在服务器端运行的函数，可以用来在页面渲染之前加载和传递数据。

下面是一个简单的例子，展示了如何在 load 钩子中使用动态 slug：

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

    // 假设我们有一个函数 fetchArticle，它可以用 slug 来获取文章
    const article = await fetchArticle(slug);
    if (article) {
      return {
        props: {
          article
        }
      };
    }

    return {
      status: 404,
      error: new Error('Article not found')
    };
  }
</script>

<script>
  export let article;
</script>

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

在这个代码示例中，我们首先通过 params.slug 获取 URL 中的 slug，然后使用这个 slug 从后端 API 或者数据库中获取对应的文章。如果文章存在，我们通过返回的对象的 props 属性将文章数据传递给组件。如果文章不存在，我们返回一个 404 错误。

结论

通过以上步骤，你可以在 SvelteKit 中实现基于 slug 的动态路由。这种方法使得根据 URL 中的变量来动态加载内容变得直接而简单，非常适合构建博客、新闻网站或任何需要动态内容的 Web 应用。