SvelteKit : how do I do slug-based dynamic routing?

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)

在路由/博客中创建一个名为 [slug].svelte 的路由组件

从 sveltejs/sapper-template 复制内容例子。

重命名 preload函数到 load使用单个参数，例如 ctx

更改返回对象以将您的 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 }}}
}

不要忘记将您的数据属性定义为一个对象。这是一个 typescript 示例:

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

从那里使用值作为 {data.slug} ， 等等
快乐黑客