如何忽略 svelte-kit 中的默认布局？

Question

我需要不同的./routes/login页面布局...我试图忽略主./routes/__layout.svelte文件，因为我不需要侧边栏。

<script>
    import NavBar from '../components/NavBar.svelte';
</script>

<main>
    {#if segment === 'login'}
        <section>
            <slot />
        </section>
    {:else}
        <NavBar />
        <section>
            <slot />
        </section>
    {/if}
</main>

<style>
    main {
        display: flex;
        justify-content: flex-start;
    }

    section {
        padding: 2.4rem;
        width: 100%;
        background-color: #f2f6fa;
    }
</style>

我收到一个错误segment is not defined。

Answer 1

截至 2022 年 10 月，已接受的答案不再有效，因为命名布局已被弃用，取而代之的是高级布局 ( https://kit.svelte.dev/docs/advanced-routing#advanced-layouts )。

\n

您可以将登录路由与名称用括号括起来的目录分组，然后为该组中的页面添加单独的布局：

\n

src/routes/\n\xe2\x94\x82 (app)/\n\xe2\x94\x82 \xe2\x94\x9c dashboard/\n\xe2\x94\x82 \xe2\x94\x9c item/\n\xe2\x94\x82 \xe2\x94\x94 +layout.svelte\n\xe2\x94\x82 (marketing)/\n\xe2\x94\x82 \xe2\x94\x9c about/\n\xe2\x94\x82 \xe2\x94\x9c testimonials/\n\xe2\x94\x82 \xe2\x94\x94 +layout.svelte\n\xe2\x94\x9c admin/\n\xe2\x94\x94 +layout.svelte\n

\n

组目录不会影响其中路由的 URL 路径名。

\n

Answer 2

由于最近对路由系统进行了大修，我提供的答案截至 2022 年 10 月不起作用。请参考下一个答案。

为什么不直接重置布局，这是 sveltekit 内置的。__layout-foo.svelte只需创建一个在您的路线内命名的文件即可/routes。然后你可以将所有你想要的组件放入文件中 https://kit.svelte.dev/docs/layouts#named-layouts

然后在您的页面中解决它：

src/routes/my-special-page@foo.svelte
<h1>I am inside __layout-foo</h1>