SvelteKit中重置布局继承失效，如何正确实现？

父布局 #

我在src/routes/+layout.svelte有一个父布局：

<script>
  import Header from "$lib/components/Header.svelte";
</script>
<Header/>
<slot/>

首页效果 #

子路由 #

在子路由src/routes/(admin)/+layout@.svelte中，我想要重置布局继承。按照文档，+layout@.svelte应该可以实现，但实际并未生效，父布局的Header组件仍出现在仪表盘页面。当前我的+layout@.svelte代码如下：

<slot/>

仪表盘页面效果 #

然而src/routes/+layout.svelte中的Header仍然显示。如何正确重置布局继承，使子布局不包含父布局的Header？

文件夹结构 #

routes/
  ├── (admin)/
  │   └── dashboard/
  │   |       ├── +page.svelte
  │   └── +layout@.svelte
  ├── styles.css
  ├── +layout.svelte
  ├── +page.svelte
  ├── +page.ts
  └── app.html

解决方案 #

你的(admin)路由组下的+layout@.svelte写法本身是正确的，它的作用就是让该组内的页面不继承任何父布局。如果Header仍然显示，你可以从这几个方向排查：

1. 清除缓存并重启服务：Svelte Kit开发服务器有时会缓存旧的布局文件，导致新布局不生效。重启服务器并清除浏览器缓存后再测试。
2. 检查app.html位置：标准的Svelte Kit项目中，app.html应该放在src/根目录下，而非routes/文件夹内。错误的位置可能打乱布局继承逻辑，把它移到正确位置后重试。
3. 验证布局是否加载：在+layout@.svelte中添加测试内容（比如<p>Admin专属布局</p>），如果页面上能看到这段内容，说明布局已经生效，Header可能来自其他全局引入的组件或app.html中的代码；如果看不到，说明布局文件没被正确识别，检查文件名是否拼写正确（注意是+layout@.svelte，不要漏写@符号）。

如果只想跳过根布局而非所有父布局，也可以使用+layout@root.svelte，但在你的场景下，+layout@.svelte已经是最合适的写法。

内容的提问来源于stack exchange，提问作者kawa