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

Question

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

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

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

提前致谢。

Answer 1

从 SvelteKit 1.0 开始，路径应该是括号中的目录，例如/blog/<slug>您将添加以下内容：

src/routes/blog/[slug]
  |_ +page.js
  |_ +page.svelte

然后src/routes/blog/[slug]/+page.js你可以添加类似的东西

export const load = ({ params }) => {
    return {
        slug: params.slug
    }
}

这会将其作为data属性返回给+page.svelte，因此您可以编写如下内容：

<script>
    export let data;
</script>

<h1>{data.slug}</h1>

参考： https: //kit.svelte.dev/docs/routing

Answer 2

您可以在以下位置创建一个文件src/routes/blog/[slug]/+page.svelte

并粘贴以下代码

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

{$page.params.slug}

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

你应该看到你的结果

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

Answer 3

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

基于参数的路由类似于sveltejs/sapper-template. 您应该首先了解 Sapper 是如何做到的。假设我有blog一条带有单个参数 slug 的路线（/blog/page-1 和 /blog/page-2）

1. 在routes/blog中创建一个名为的路由组件[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>

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

快乐黑客