SvelteKit动态路由页面数据更新异常问题求助

AI 小北

2026-8-11

解决SvelteKit同路由参数切换时数据不更新的问题

问题根源

你的问题主要来自两个核心点：

路由参数名匹配错误
页面数据未做响应式同步

解决方案

1. 修正`+page.server.js`中的参数名

路由结构是/items/[category]，所以params对象里的参数名称是category，而非itemCategory。错误的参数名会导致每次查询条件无效，自然无法加载对应分类的数据。

修正后的代码：

import { getItems } from '$lib/services/ItemService';
export const csr = false;
export const load = ({ locals, params }) => {
    return {
        items: getItems(locals, `category = "${params.category}"`)
    };
};

2. 确保页面数据响应式更新

在+page.svelte中，你用let items = data.items做了一次性赋值，当路由切换、data更新时，items不会自动同步最新数据。你有两种修复方式：

方式一：直接使用data.items遍历

<script>
   import { ItemCard } from '$lib/components';
   export let data;
</script>
...
<div class="grid grid-cols-1 md:grid-cols-3 px-4 gap-6">   
   {#each data.items as item}
      <ItemCard {item}/>
   {/each}
</div>

方式二：使用响应式声明同步数据

<script>
   import { ItemCard } from '$lib/components';
   export let data;
   $: items = data.items; // 响应式更新，data变化时自动同步
</script>
...
<div class="grid grid-cols-1 md:grid-cols-3 px-4 gap-6">   
   {#each items as item}
      <ItemCard {item}/>
   {/each}
</div>