[编辑] 我已更新示例以包括使用 preload ( userb
) 和 {#await} ( usera
)。场景 usera 和 userb 都未定义/users/[username]/about.svelte
你将如何让这样的事情起作用:
/users/[用户名]/_layout.svelte
{#await promise}
Loading...
<slot {usera} {userb}/>
{:then usera}
{ JSON.stringify({usera, userb}) }
<slot {usera} {userb}/>
{/await}
<script context="module">
export async function preload(page, session) {
let userb = await fetchUser(page.params.username)
return { userb };
}
</script>
<script>
import { stores } from '@sapper/app'
const { page } = stores();
export let userb;
let usera
async function fetchUser (username) {
return new Promise(resolve => setTimeout(() => {
resolve({ username });
}, 333))
}
let promise = fetchUser($page.params.username)
</script>
/users/[用户名]/about.svelte
{#if usera}
<span>{usera.username}</span>
{:else}
NULL USER_A
{/if}
{#if userb}
<span>{userb.username}</span>
{:else}
NULL USER_B
{/if}
<script>
export let usera
export let userb
$: console.log({ usera })
$: console.log({ userb })
</script>
似乎 /user/:username/about 没有从 _layout 接收道具用户。这适用于 nuxt(对于 vuejs 而不是 svelte 基本上是 sapper)。