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

Question

我是 Svelte 和一般编码方面的新手。我更喜欢学习 SvelteKit (Svelte@Next) 而不是工兵，因为这似乎是 Svelte 的发展方向。

对于我的个人项目，我需要支持基于url slugs的动态路由。我如何在 SvelteKit 中做到这一点？例如，如果我有 /blog 目录并且需要根据其“id”提取内容，我该怎么做？

我遇到困难的部分是访问 URL slug 参数。

提前致谢。

Answer 1

警告 - 随着 SvelteKit 的成熟，我的回复中的信息可能无效，但从我迄今为止所做的实验来看，这是有效的：

基于参数的路由类似于 sveltejs/sapper-template。您应该先了解 Sapper 是如何做到的。假设我有一条路线 blog，其中包含一个参数 slug (/blog/page-1 & /blog/page-2)

1. 在路由/博客中创建一个名为 [slug].svelte 的路由组件
2. 复制 sveltejs/sapper-template 示例中的内容。
3. 使用单个参数将 preload 函数重命名为 load，例如 ctx
4. 更改返回对象以将您的 slug 属性附加到 props

export async function load(ctx) {
  let slug = ctx.page.params.slug
  return { props: { slug }}
}

如果您的博客有多个 slug 参数 (/blog/2021/01/29/this-is-a-slug)，您可以删除 [slug].svelte 并创建文件名 [...data].svelte 和将您的加载方法更改为：

export async function load(ctx) {
  let [year, month, day, slug] = ctx.page.params.data;
  return { props: { data: { year, month, day, slug }}}
}

不要忘记将您的数据属性定义为一个对象。这是一个打字稿示例：

<script lang="ts">
    export let data: { slug:  string, year: number, month: number, day: number };
</script>

从那里使用值作为 {data.slug} 等

快乐黑客

Answer 2

• 您可以使用 [括号] 创建一个文件：touch src/routes/blog/[slug].svelte

并粘贴以下代码

<script>
    import { page } from '$app/stores';
</script>

{$page.params.slug}

然后导航到您的应用 http://localhost:3000/blog/123

您应该会看到结果

为了为http://localhost:3000/blog页面创建内容，您可以修改src/routes/blog/index.svelte