SvelteKit Load函数在同路由不同ID参数导航时未重新执行

为什么会出现这个问题？ #

你点击的是同一路由（/products/[id]）下不同参数的链接，SvelteKit为了性能优化，默认会复用当前页面的组件实例——它只会更新浏览器地址栏的URL，不会重新调用+page.server.ts里的load函数，自然就加载不到新数据了。

实用解决方式 #

1. 监听路由参数变化手动请求数据 #

在+page.svelte里订阅page store，一旦params.id发生变化就重新拉取数据：

<script>
  import { page } from '$app/stores';
  export let data;
  let product = data.product;

  // 监听参数更新
  page.subscribe((newPageState) => {
    if (newPageState.params.id !== $page.params.id) {
      // 复用你的数据请求逻辑，这里用fetch示例
      fetch(`/products/${newPageState.params.id}`)
        .then(res => res.json())
        .then(newData => {
          product = newData.product;
        });
    }
  });
</script>

2. 用invalidate标记数据失效 #

点击链接时调用invalidate，让SvelteKit知道对应数据需要重新加载，从而触发load函数：

<script>
  import { invalidate } from '$app/navigation';

  function handleProductClick(id) {
    // 标记该产品路由的数据缓存失效
    invalidate(`/products/${id}`);
  }
</script>

<a 
  href="/products/{item.identifier}" 
  on:click|preventDefault={() => handleProductClick(item.identifier)}
>
  {item.name}
</a>

3. 在Load函数里配置自动刷新 #

直接在+page.server.ts的返回值中添加invalidateAll: true，让路由参数变化时自动重新执行load：

// +page.server.ts
export async function load({ params }) {
  // 你的数据请求逻辑
  const product = await getProductById(params.id);
  
  return {
    product,
    // 开启参数变化时自动刷新
    invalidateAll: true
  };
}

4. 用goto强制刷新导航 #

调用goto函数导航时，带上invalidateAll: true参数，强制重新加载页面数据：

<script>
  import { goto } from '$app/navigation';

  function goToProduct(id) {
    goto(`/products/${id}`, { invalidateAll: true });
  }
</script>

<a 
  href="/products/{item.identifier}" 
  on:click|preventDefault={() => goToProduct(item.identifier)}
>
  {item.name}
</a>

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