我是 Svelte 和一般编码的新手。我更喜欢学习 SvelteKit (Svelte@Next) 而不是工兵,因为这似乎是 Svelte 的发展方向。
对于我的个人项目,我需要支持基于 url slugs 的动态路由。我如何在 SvelteKit 中做到这一点?例如,如果我有/blog 目录并且需要根据其“id”提取内容,我该怎么做?
我遇到困难的部分是访问 URL slug 参数。
提前致谢。
最佳答案
警告 - 随着 SvelteKit 的成熟,我回复中的信息可能无效,但从我迄今为止所做的实验来看,这是有效的:
基于参数的路由类似于 sveltejs/sapper-template
.您应该先了解 Sapper 是如何做到的。假设我有一条路线 blog
使用单个参数 slug (/blog/page-1 &/blog/page-2)
[slug].svelte
的路由组件sveltejs/sapper-template
复制内容例子。 preload
函数到 load
使用单个参数,例如 ctx
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}
, 等等快乐黑客
关于SvelteKit : how do I do slug-based dynamic routing?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65930303/