SvelteKit 2.0 如何携带状态进行页面导航？

SvelteKit 2.0移除了goto方法的state选项，新增的pushState仅修改URL不触发导航，要实现旧版本的导航传状态效果，有两种可靠方案：

方案一：结合goto与pushState #

先通过goto完成路由导航，异步等待导航完成后，调用pushState更新当前历史记录的状态：

import { goto, pushState } from '$app/navigation';

async function navigateWithState() {
  // 先导航到目标路由
  await goto('/route');
  // 更新历史状态，URL保持当前路由不变
  pushState({ foo: 'bar' }, '', '/route');
}

在目标路由中，直接从历史状态获取值：

const foo = window.history.state.foo;

方案二：使用sessionStorage临时存储状态 #

这种方式不依赖历史API，更适合复杂场景或需要兼容页面刷新的情况：

1. 发起导航时，将状态存入sessionStorage：

import { goto } from '$app/navigation';

function navigateWithState() {
  // 序列化状态并存入sessionStorage
  sessionStorage.setItem('navState', JSON.stringify({ foo: 'bar' }));
  goto('/route');
}

2. 在目标路由中，通过afterNavigate钩子读取并清除临时状态：

import { afterNavigate } from '$app/navigation';

let foo;

afterNavigate(() => {
  const storedState = sessionStorage.getItem('navState');
  if (storedState) {
    const state = JSON.parse(storedState);
    foo = state.foo;
    // 读取后立即清除，避免重复获取
    sessionStorage.removeItem('navState');
  }
});

注意：方案一依赖浏览器历史记录，若用户手动刷新页面，历史状态会丢失；方案二的sessionStorage仅在当前会话有效，关闭标签页后自动清除，无需手动清理残留数据。

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