Svelte动态路由跳转后+page.js未触发加载问题求助

1. 核对动态路由参数的一致性 #

你提到路由是/blog/[blogname]，但序列化错误里出现了[blogId]，这大概率是参数名不匹配导致的。确保：

• 路由目录名是[blogname]，对应+page.js/+page.server.js中load函数的params.blogname，不要混用blogId这类不一致的参数名，否则SvelteKit会认为是同一份数据，不会重新执行load逻辑。

2. 触发客户端导航时的load重执行 #

当在同一路由组件（仅参数变化）跳转时，默认不会重新执行load函数，需要主动触发数据失效：

• 使用goto跳转时，在调用前加入invalidateAll()，强制所有load函数重新执行：

  import { goto, invalidateAll } from '$app/navigation';
  
  async function goToNextBlog(nextBlogName) {
    await invalidateAll();
    await goto(`/blog/${nextBlogName}`);
  }
  

• 如果只想针对博客数据失效，可以给load函数添加id标识，精准失效：

  // +page.js
  export async function load({ params }) {
    const blog = await fetchBlog(params.blogname);
    return { blog };
  }
  // 跳转时
  await invalidate('load:blog'); // 对应load函数的默认id，或自定义id
  

3. 修复+page.server.js的序列化错误 #

+page.server.js返回的数据必须是JSON可序列化的，不能包含函数、组件实例这类无法被字符串化的内容：

• 确保返回的是纯数据对象，比如：

  // +page.server.js
  export async function load({ params }) {
    const blogData = await fetchBlogFromAPI(params.blogname);
    // 只返回纯数据，不要返回函数、组件
    return { title: blogData.title, content: blogData.content };
  }
  

4. 兜底：监听路由参数变化手动加载 #

如果以上方法都无效，可以在+page.svelte中监听参数变化，手动触发数据加载：

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

  // 当blogname参数变化时，重新加载内容
  $: if ($page.params.blogname) {
    fetch(`/api/blog/${$page.params.blogname}`)
      .then(res => res.json())
      .then(data => blogContent = data);
  }
</script>

{#if blogContent}
  <h1>{blogContent.title}</h1>
  <div>{@html blogContent.content}</div>
{/if}

注意：这是兜底方案，优先使用SvelteKit的load机制，避免失去SSR优势。

5. 检查路由结构正确性 #

确保动态路由的文件结构完全正确：

src/routes/
└── blog/
    └── [blogname]/
        ├── +page.js
        └── +page.svelte

不要出现嵌套路由冲突、文件重名等问题。

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