如何在Sapper中离开父布局？

Question

目前，我正在处理一个项目，该项目在除了两个页面以外的所有页面中共享 Menu 组件。我将菜单组件添加到根 _layout.svelte 文件中。现在，由于不需要 Menu 组件的两个页面是嵌套路由，所以 Menu 会在这些页面中出现，因为它们是子路由。虽然他们被设计成这样。但是我认为应该有一种方法可以退出/离开父级布局。否则，我将不得不删除 _layout.svelte 根文件，并将 Menu 组件添加到每个路由中，这与 DRY 原则过于矛盾。在 Sapper 中是否有一种方法可以离开父级 _layout.svelte？

- Yousuf Iqbal Hashim

---

这个回答解决了你的问题吗？从_layout中排除一个页面。 - Stephane Vanraes

Answer 1

使用child.segment来控制使用哪种布局：

<!-- src/routes/_layout.html -->
{#if child.segment === 'login'}
  <svelte:component this={child.component} {...child.props}/>
{:else}
  <div class="fancy-layout">
    <svelte:component this={child.component} {...child.props}/>
  </div>
{/if}

- Arifulislam

Answer 2

我无法使提供的解决方案起作用。有人可以提供一个可行的示例或在更大的上下文中展示解决方案吗？

我通过检查路由路径的if语句解决了相同的问题。

<!-- src/routes/_layout.svelte-->

<script>
  import { stores } from '@sapper/app'
  { page } = stores()
</script>

{#if $page.path != "/login"} <!-- If your route file is /src/routes/login.svelte -->
  <Nav {segment}/>
{/if}

<main>
  <slot></slot>
</main>

- maglet

Answer 3

Sapper已经发展成为SvelteKit 1.0，支持使用高级路由内置的此功能。

例如，使用(group)，您可以将页面隔离到特定的父布局中：

src/routes/
│ (app)/
│ ├ +page.svelte
│ └ +layout.svelte
│ (marketing)/
│ ├ +page.svelte
│ └ +layout.svelte
├ admin/
└ +layout.svelte

在上面的例子中：

• (app)和(marketing)是使用的两个组。
• /+layout.svelte是应用于所有子路由的根布局，无论它们属于哪个组。
• /(app)/+page.svelte将与/(app)/+layout.svelte和/+layout.svelte布局一起应用。
• /(marketing)/+page.svelte将与/(marketing)/+layout.svelte和/+layout.svelte布局一起应用。

您还可以使用+layout@或+page@语法在嵌套页面中精细地排除父布局。详情请参见：https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-layout

---

请按照文档获取更多详细信息：https://kit.svelte.dev/docs/advanced-routing#advanced-layouts。

- phoenisx

---

SvelteKit 和 Sapper 是两个不同的项目。SvelteKit 已稳定在 1.x 版本，而 Sapper 的开发几乎已经停止，除了一些小修补。 - Yousuf Iqbal Hashim