通过 Sveltekit 路线传递道具

Question

我使用的是 Svelte+Sveltekit，没有任何路由库。

我想做的是将对象通过<a>标签（或其他方式）从另一个页面传递到路由。

在一页上我有一个对象列表，对于每个对象我渲染一个项目：

// home.svelte

<-- start of page -->
  {#each users as user}
    <a href="users/{user.username}" sveltekit:prefetch/>
  {/each}
<-- end of page -->

上面的对象user有一些我想在 - 中渲染的键值对，/users/{username}它是作为 slug 路由创建的：

// routes/users/[slug].svelte

<script context="module">
  export async function load(ctx) {
   let data = ctx.page.params;

   // I'd like to be able to pass the whole user object from the <a> tag in home.svelte, and access it from ctx.page.params if possible
        
  return { props: { slug: data.slug, user: data.user } }
}
</script>
<script>
  export let slug;
  export let user; 
</script>

<div>
  <h1>{slug}</h1>
  <h1>{JSON.stringify(user)}</h1>
</div>

是否可以这样做，或者我是否需要不同的方法/路由库？

Answer 1

我认为这样做是可以的。您可以通过使用“page”参数导出加载函数来获取users/[slug].svelte中的{user.username}。您可以尝试如下修改。您可以在此处查看 svelteKit 在线文档

export const load = ({ page }) => {
  var username = page.params.slug;  //slug refer to [slug].svelte
  return {
    props: {
      user: GetUserByName(username);
    }
  };

...