Svelte中使用goto跳转后旧组件残留问题求助

针对你遇到的/products和categories/{slug}页面共享同一组件，跳转后出现重复组件的问题，以下是几个可行的解决方案：

1. 在组件内部用{#key}绑定当前路径 #

直接在共享组件内部，用当前页面路径作为key值包裹组件内容，路径变化时强制组件重新渲染，避免复用旧实例：

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

{#key $page.url.pathname}
  <!-- 组件的所有内容放在这里 -->
{/key}

2. 手动重置组件内部状态 #

如果组件有自定义状态，在路由切换时手动重置状态，避免旧状态残留：

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

  // 示例状态
  let productList = [];
  let activeFilter = '';

  onMount(() => {
    const unsubscribe = page.subscribe((newPage) => {
      // 每次路由变化时重置所有状态
      productList = [];
      activeFilter = '';
    });
    // 组件销毁时取消订阅
    return unsubscribe;
  });
</script>

3. 修正Layout中{#key}的用法 #

之前在Layout中使用{#key}无效，大概率是key值选择不对。确保绑定的是能区分两个路由的唯一值，比如完整路径：

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

{#key $page.url.pathname}
  <slot />
{/key}

这样每次路由切换，Layout会重新渲染slot中的内容，强制销毁旧组件实例并创建新实例。

4. 启用destroyOnHide选项 #

在共享组件对应的+page.js文件中添加配置，让页面离开时自动销毁组件实例：

// +page.js
export const destroyOnHide = true;

这个选项会禁用SvelteKit的组件复用机制，每次进入页面都会创建新的组件实例，彻底避免残留问题。

问题根源 #

SvelteKit默认会复用相同组件的实例来提升性能，但当两个不同路由使用同一组件时，复用逻辑会导致旧的DOM节点和状态没有被清理，从而出现重复组件的情况。以上方案都是通过强制组件重建或重置状态来解决这个问题。

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