SvelteKit中使用goto传值后页面参数为undefined的问题排查

问题根源 #

你遇到的value为undefined的问题，核心原因是SvelteKit 2.0已废弃在+page.svelte中使用<script context="module">定义load函数的写法，原来的代码逻辑在2.0版本中不会被执行，导致无法从params中获取路由参数。

修复步骤 #

1. 创建单独的路由加载文件 #

在src/routes/test/[value]/目录下新建+page.js文件，将原有的数据加载逻辑移到这里：

export async function load({ params }) {
    const { value } = params;
    return {
        props: { value }
    };
}

2. 简化目标页面代码 #

修改src/routes/test/[value]/+page.svelte，移除无用的<script context="module">标签，直接接收传递的props：

<script>
    export let value;
    console.log('Loaded value:', value);
</script>

<div class="value-display">
    <h1>Passed Value:</h1>
    <p>{value}</p>
</div>

补充说明 #

SvelteKit 2.0对路由数据加载机制做了明确拆分：

• 通用/客户端加载逻辑放在+page.js
• 服务端专属加载逻辑放在+page.server.js
• +page.svelte仅负责组件渲染，不再处理数据加载逻辑

你的源页面（Gallery.svelte）中goto('/test/TOTO')的写法是正确的，路由参数与[value]命名匹配，修复后即可正常传递并显示参数值。

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