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 渲染主要部分。
也许查看嵌套布局和页面存储以检测哪些细节处于活动状态。