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

问题描述 投票:0回答:3

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

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

javascript typescript routes sveltekit goto
3个回答
4
投票

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

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

有两点需要注意:

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

3
投票

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 设置为什么,都应该有一个路由,否则页面重新加载将导致错误,因为将不再找到该页面。


0
投票

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

感兴趣的两个新 SvelteKit 函数是

pushState
replaceState

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

© www.soinside.com 2019 - 2024. All rights reserved.