从 _layout 中排除页面

Question

您好，我是 Svelte、Sapper 和 Express 的新手。

问题：
我正在使用 Sappers _layout.html 来显示 2 个应该显示在所有页面上的组件（标题和菜单），除了登录页面。

实现这一目标的正确方法是什么？

可能的解决方案：
A）从静态文件夹提供登录页面，并使用快速中间件路由到它？

B）将登录作为我的项目的根目录并将所有其他路由向下移动一个级别，以便它们可以共享不涉及登录页面的通用布局？

C) 在布局中放置和 if 语句并确定用户何时在登录页面上以隐藏标题和菜单组件。

D) 不使用布局来显示组件。

Answer 1

我对这个问题的首选解决方案是选项 C——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

只需添加一个与已接受的答案类似的答案，但从 2022 年初开始更新 SvelteKit 的语法（仍处于测试阶段）。

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

<script>
import { page } from '$app/stores'
</script>

{#if $page.url.pathname === '/fancy'}
  <div class="fancy-layout">
    <slot />
  </div>
{:else}
  <slot />
{/if}

另外，想让你知道，SvelteKit 非常棒。你做出了正确的选择。