有没有办法在SvelteKit上使用goto()而无需重新加载页面？

Question

我有一个问题：我需要向 url 添加额外的部分（即：我有 /route，我需要将其转换为 /route/something 而不重新加载页面。我尝试使用 goto()，但它重新加载页面。如果有人可以帮助我，我将不胜感激。

如果可能的话，我希望通过使用 goto() 来更改 url 参数，例如：/watchlist/[lang] 而无需重新加载

Answer 1

目前，您应该使用 History API 而不是 sveltekit goto() 因为 goto() 实际上会导航到目标页面（触发 load() ），而 History API 不会。请参阅问题此处。

window.history.replaceState(history.state, '', newURL)

有两点需要注意：

1. 将当前状态作为 ReplaceState() 中的第一个参数传递，以避免弄乱 sveltekit 路由器。
2. 确保您确实有 newURL 的路由，以便页面刷新不会破坏您的应用程序。

Answer 2

SvelteKit 使用文件系统和基于路径的路由器，因此如果更改路径，则会调用页面更改。您可能应该不制作类似路径的语言部分的东西。

例如，您可以将其作为查询参数传递，或将其与会话/用户信息一起存储在 cookie、存储或服务器端中。

要更改查询，您可以执行以下操作：

function onChange() {
    const url = new URL(window.location.href);
    url.searchParams.set('lang', 'en');

    goto(url.href);
    // or this, if you do not want a new history entry:
    goto(url.href, { replaceState: true });
}

如果您确实想阻止导航并将其保留在路径中，您可以尝试使用

history.pushState

/

history.pushState

，但这可能会扰乱导航，因为这会绕过 SvelteKit 路由器。无论您将 URL 设置为什么，都应该有一个路由，否则页面重新加载将导致错误，因为将不再找到该页面。

Answer 3

自从 SvelteKit v2.0.0 引入了浅路由以来，现在这是可能的。

感兴趣的两个新 SvelteKit 函数是

pushState

和

replaceState

。

这些工作方式与通用 Web History API 类似，但具有额外的好处：与 SvelteKit 正确集成，以便您在历史堆栈中浏览时获得正确的数据更改和滚动恢复。