SvelteKit：如何使用基于路由的命名插槽

Question

我是 SvelteKit 的新手，无法弄清楚与插槽相关的问题。我正在尝试制作一个应用程序布局，其中包含主窗格和详细信息窗格，其中主窗格和详细信息的内容是根据路线确定的。

假设我有一个这样的 __layout.svelte 文件：

//-------------------------
// routes/__layout.svelte
//-------------------------
<main>
  <slot name="master" />
  <slot name="detail" />
</main>

然后我有另一个这样的页面（还有几个类似的路由页面）：

//-------------------------
// routes/users.svelte
//-------------------------

<div slot="master">
  Users master content...
</div>

<div slot="detail">
  Users detail content...
</div>

当我导航到 http://localhost:3000/users 时，我收到一条错误消息，提示我无法在 users.svelte 中使用 slot=""，因为它不在子组件中。

我是不是做错了？您将如何在 SvelteKit 中实现类似的应用程序布局？

Answer 1

您快完成了，但是您不能在 __layout.svelte

中使用命名槽

那个 __layout 组件只接收一个（默认）插槽。该插槽包含匹配路由的组件。

一个解决方案是将 __layout 重命名为独立组件并在 route.svelte 中使用它：

//-------------------------
// lib/MasterDetail.svelte
//-------------------------
<main>
  <slot name="master" />
  <slot name="detail" />
</main>

//-------------------------
// routes/users.svelte
//-------------------------
<script>
import MasterDetail from "$lib/MasterDetail.svelte"
</script>

<MasterDetail>
  <div slot="master">
    Users master content...
  </div>

  <div slot="detail">
    Users detail content...
  </div>
</MasterDetail>

另一个解决方案是限制 route.svelte 只渲染细节部分，让 __layout 渲染主要部分。
也许查看 nested layouts and the page store 以检测哪个细节处于活动状态。

SvelteKit：如何使用基于路由的命名插槽

SvelteKit: How to Use Named Slots Based on Route

svelte

sveltekit