SvelteKit 2.0中pushState后返回页面load函数URL异常问题

问题原因 #

连续调用pushState和goto的方式会导致SvelteKit内部路由状态与浏览器历史不同步：pushState仅修改了浏览器地址栏和历史记录，但未更新SvelteKit的路由状态，因此返回页面时，load函数仍读取旧的路由状态，导致获取的URL缺失搜索参数。

解决方案 #

使用goto的replaceState选项替换当前页面的历史条目，确保SvelteKit路由状态与浏览器历史同步，再导航到目标页面。修改后的代码如下：

page1.svelte #

<script lang="ts">
    import { goto } from '$app/navigation';

    async function submit() {
        // 替换当前历史条目为带参数的page1 URL，同步SvelteKit路由状态
        await goto('/page1?a=1', { replaceState: true });
        // 导航到page2
        goto('/page2?a=1');
    }
</script>

<button on:click={() => submit()}>Lez go</button>

原理说明 #

• goto('/page1?a=1', { replaceState: true })：用带搜索参数的URL替换当前的历史条目，同时触发SvelteKit更新内部路由状态，确保load函数能正确读取参数。
• 等待该操作完成后再调用goto('/page2?a=1')，此时浏览器历史记录会形成page1?a=1 → page2?a=1的链条，返回时SvelteKit会根据同步后的路由状态加载带参数的page1，load函数就能获取到正确的url参数。

验证效果 #

点击按钮导航到page2后，再点击浏览器返回按钮：

• 浏览器地址栏显示/page1?a=1
• page1.ts的load函数中url.toString()会输出/page1?a=1，能正确获取到搜索参数a=1

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