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 在线文档 here

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

...

通过路由 Sveltekit 传递道具

1 个答案: