2

我正在使用没有任何路由库的 Svelte+Sveltekit。

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

在一个页面上，我有一个对象列表，对于每个对象，我呈现一个项目：

// home.svelte

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

上面的对象有一些我想在- 创建为 slug 路由user中呈现的键值对：/users/{username}

// 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>

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

4

2 回答 2

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);
    }
  };

...
于 2021-07-03T04:14:58.157 回答
0

您可以使用“查询”参数

// home.svelte
//use a query string converter library

<a href="users/{user.username}?{objectToQuery(user)}" sveltekit:prefetch/>

然后在加载功能

return { 
  props: { 
    slug: page.params.slug, 
    user: queryToObject(page.params.query) 
  } 
}

但您最安全的选择是使用商店。

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

在这种情况下，您不需要传递任何东西。

于 2021-09-17T07:08:08.460 回答