SvelteKit路由挂载后页面数据无法动态更新问题

问题原因 #

核心问题是组件复用导致的响应式失效：在SvelteKit中，导航到同一路由的不同参数（比如从/category_1到/category_2）时，页面组件不会重新创建，而是复用已有实例。你在<script>里用const提前解构data的属性，这些常量只会在组件首次挂载时赋值一次，后续data更新时不会同步刷新，导致模板始终显示旧数据。

另外注意：你的+page.server.ts的load函数仅返回了category和products，但页面中使用了data.categories，如果categories不是从父布局的load函数传入，这里会出现undefined，需要确认该数据的来源逻辑。

解决方案 #

使用Svelte的响应式声明（$:）来解构data属性，确保data更新时解构后的变量自动同步：

修改page.svelte的脚本部分：

<script lang="ts">
  export let data;
  // 响应式解构，data变化时自动重新赋值
  $: ({ products } = data.products ?? {});
  $: ({ category } = data.category ?? {});
  $: ({ categories } = data.categories ?? {});
  
  import ProductCard from '../../components/ProductCard.svelte';
</script>

或者直接在模板中使用data的原始属性，跳过提前解构的步骤，同样能保证响应式：

<h1 class="text-center">{data.category?.categoryname}</h1>

额外建议 #

1. 给可选属性添加可选链操作符（?.），避免data未初始化时出现报错，比如category?.categoryname
2. 若需要在该页面获取全部分类数据，需在+page.server.ts的load函数中补充获取逻辑并返回：

   // 在+page.server.ts中新增获取分类的函数
   const fetchAllCategories = async () => {
     const response = await fetch(`https://gunstorewebsite.com/apicategories`);
     return response.json();
   };
   
   // 在load函数中调用并返回
   export const load = async ({ params }) => {
     // ... 原有逻辑
     const categories = await fetchAllCategories();
     
     return {
       category,
       products,
       categories
     };
   };
   

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