如何在 Sapper 中保留父布局？

Question

目前，我正在开发一个项目，该项目在除两个页面之外的所有页面上共享一个Menu组件。 我在根_layout.svelte文件中添加了菜单组件。 现在，由于两个不需要Menu组件的页面是嵌套路由。 Menu出现在它们内部，因为它们是子路由。 他们看起来是这样的。 但我认为应该有一些方法可以选择退出/离开父布局。 否则我将不得不删除_layout.svelte根文件并将Menu组件添加到每个路由，这对 DRY 来说太过分了。 有没有办法在 Sapper 中保留父_layout.svelte ？

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}

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>

Answer 3

Sapper 已经发展为 SvelteKit 1.0，它支持使用Advanced Routing内置的此功能。

例如，使用(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