javascript - 如何在 Sapper 中离开父布局？

Question

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

Answer 1

usingchild.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>