SvelteKit页面切换时新页面追加至底部的问题求助

我有一个SvelteKit Web应用，完整代码见GitHub仓库。切换页面时，新页面会追加到当前页面底部，刷新后旧页面才消失。该问题与Stack Overflow上的案例类似，但我未使用加载指示器，且现有方案无效。

使用的包版本：

• @sveltejs/kit: ^1.22.1
• svelte: ^3.58.0
• @auth/sveltekit: ^0.3.3

相关代码片段 #

根布局 /+layout.svelte #

<script lang="ts">
 ... imports
</script> 

<div class="flex flex-col h-screen">
  <Drawer>
    <AvatarDropdown slot="user" />
    <div class="grow h-full" slot="content">
      <slot />
    </div>
  </Drawer>
</div>

仪表盘布局 /dashboard/+layout.svelte #

<script>
  const user = $page.data.session?.user;
</script>

{#if user}
  <slot />
{:else}
  Please log in
{/if}

仪表盘页面 /dashboard/+page.svelte #

<script>
  import { onDestroy } from "svelte";
</script>
<div
  class=""
  out:fade={{ duration: 0 }}
>
Content
</div>

排查方向 #

1. 移除过渡指令测试
   你在仪表盘页面使用了out:fade={{ duration: 0 }}，即使时长设为0，Svelte的过渡系统仍可能保留旧DOM节点等待过渡完成。先移除这个过渡指令，验证页面切换是否恢复正常。

2. 检查Drawer组件的插槽处理
   根布局中的Drawer组件可能没有正确清理插槽内容。如果Drawer内部没有对插槽内容做更新触发（比如用{#key $page.url}强制重新渲染），新页面内容会直接追加到旧内容后面。检查Drawer组件的实现逻辑。

3. 验证布局条件渲染的状态更新
   仪表盘布局里的{#if user}依赖会话状态，如果$page.data.session在页面切换时更新延迟，会导致旧页面内容没有被及时替换。可以在布局中添加console.log(user)，观察页面切换时用户状态的变化时机。

4. 排查CSS布局冲突
   根布局使用了h-screen和flex flex-col，如果Drawer或页面内容的CSS设置了position: absolute、float等属性，可能导致内容叠加。检查所有相关组件的样式，确保布局规则不会阻止旧内容被替换。

5. 升级SvelteKit版本
   你当前使用的@sveltejs/kit是1.22.1，该版本可能存在路由渲染的已知问题。尝试升级到最新稳定版本，再测试页面切换是否正常。

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