从 _layout 中排除一个页面

Question

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

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

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

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

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

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

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 很棒。你做出了正确的选择。

从 _layout 中排除一个页面

Exclude a page from _layout

svelte