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

【问题标题】：SvelteKit: how do I do slug-based dynamic routing?SvelteKit：如何进行基于 slug 的动态路由？
【发布时间】：2021-07-30 00:20:14
【问题描述】：

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

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

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

提前致谢。

【问题讨论】：

考虑到 SvelteKit 尚未发布（并且仍在更改中），在实际发布时，对这个问题的任何回答都可能不正确。
今天，Sapper 使用“预加载”功能来访问其 URL 参数。一旦 SvelteKit 完全启动并运行，它可能会使所有 Sapper 内容过时并且有些无关紧要。如果在早期 SvelteKit 中访问 URL 参数的方式发生了变化，那么这里的答案很容易被更新。

【解决方案1】：

并粘贴以下代码

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

{$page.params.slug}

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

你应该看到你的结果

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

【讨论】：

如何获取路线名称？
什么意思？您的路线名称由您的文件夹架构定义。如果您的文件夹在 src 文件夹中命名为“my-route”，那么您的 url 将是“{base_url}/my-route”。
感谢您的回答，我很好奇这里的 $ 是什么意思？ [在 $page 变量中]
据我了解，在 SvelteKit 中，页面是作为 store 元素生成的。在 svelte 中，如果你想访问 store 元素，你需要在它们前面加上 $。页面文档：kit.svelte.dev/docs#loading-input-page
现在已弃用。请更新。

【解决方案2】：

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

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

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}等

黑客愉快

【讨论】：