SvelteKit动态组件样式问题：子页面导航时参数不更新

问题示例仓库：https://github.com/RafalBuchner/sveltekit-issue-example

场景说明 #

我是Web开发新手，正在搭建字体展示网站，开发了Tester组件（路径：src/lib/components/tester.svelte），用于src/routes/typeface/[style]/+page.svelte页面中。页面基于src/routes/typeface/[style]/+page.server.js返回的数据（数据源：src/lib/data/font-data.json）动态生成多个Tester实例。

问题详情 #

• 从首页直接进入「slanted」子页面，滑块参数初始化正常；
• 通过顶部导航切换至「upright」子页面时，font weight和font slant参数未更新，文本显示为错误的细体倾斜样式；
• 刷新页面后样式恢复正常，但切换回「slanted」子页面时异常再次出现。

需求：无需刷新页面，保证页面切换时字体样式正确。

解决方法 #

1. 给Tester组件添加唯一Key，强制重新渲染 #

Svelte默认会复用组件实例优化性能，导致页面切换时旧props未更新。在src/routes/typeface/[style]/+page.svelte中，遍历生成Tester时添加唯一key属性：

{#each data.testItems as item}
  <Tester {...item} key={`${$page.params.style}-${item.text}`} />
{/each}

用当前页面参数style结合组件唯一属性（如text）作为key，确保页面切换时组件重新初始化。

2. 确保Tester组件内样式响应props变化 #

在src/lib/components/tester.svelte中，用Svelte反应式语句监听props变化，自动更新字体样式：

<script>
  export let weight = 400;
  export let slant = 0;
  export let text = "Sample Text";

  // 监听props变化，动态计算样式
  $: fontStyle = slant !== 0 ? 'oblique' : 'normal';
  $: fontWeight = weight;
</script>

<div 
  class="tester-text"
  style="font-weight: {fontWeight}; font-style: {fontStyle};"
>
  {text}
</div>

所有依赖props的样式逻辑通过$:声明，确保props更新时样式同步变化。

3. 验证页面数据在客户端导航时正确更新 #

确认src/routes/typeface/[style]/+page.server.js的load函数正确根据params.style返回对应数据：

export async function load({ params }) {
  const fontData = await import('$lib/data/font-data.json');
  return {
    testItems: fontData.default[params.style] || []
  };
}

SvelteKit在客户端导航时会自动重新执行load函数，确保页面组件拿到最新的data。

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