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我只是收到一条错误消息，提示我无法使用slot=""in users.svelte，因为它不在子组件内。

我这一切都错了吗？您将如何在 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渲染主部分。
也许可以查看嵌套布局和页面存储来检测哪些细节处于活动状态。