我有一个问题:我需要向 url 添加额外的部分(即:我有 /route,我需要将其转换为 /route/something 而不重新加载页面。我尝试使用 goto(),但它重新加载页面。如果有人可以帮助我,我将不胜感激。
如果可能的话,我希望通过使用 goto() 来更改 url 参数,例如:/watchlist/[lang] 而无需重新加载
目前,您应该使用 History API 而不是 sveltekit goto() 因为 goto() 实际上会导航到目标页面(触发 load() ),而 History API 不会。请参阅问题此处。
window.history.replaceState(history.state, '', newURL)
有两点需要注意:
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 设置为什么,都应该有一个路由,否则页面重新加载将导致错误,因为将不再找到该页面。
自从 SvelteKit v2.0.0 引入了浅路由以来,现在这是可能的。
pushState
和 replaceState
。
这些工作方式与通用 Web History API 类似,但具有额外的好处:与 SvelteKit 正确集成,以便您在历史堆栈中浏览时获得正确的数据更改和滚动恢复。