$app/navigation
import {
function afterNavigate(callback: (navigation: import("@sveltejs/kit").AfterNavigate) => void): voidA lifecycle function that runs the supplied callback when the current component mounts, and also whenever we navigate to a URL.
afterNavigate must be called during a component initialization. It remains active as long as the component is mounted.
afterNavigate,
function beforeNavigate(callback: (navigation: import("@sveltejs/kit").BeforeNavigate) => void): voidA navigation interceptor that triggers before we navigate to a URL, whether by clicking a link, calling goto(...), or using the browser back/forward controls.
Calling cancel() will prevent the navigation from completing. If navigation.type === 'leave' — meaning the user is navigating away from the app (or closing the tab) — calling cancel will trigger the native browser unload confirmation dialog. In this case, the navigation may or may not be cancelled depending on the user’s response.
When a navigation isn’t to a SvelteKit-owned route (and therefore controlled by SvelteKit’s client-side router), navigation.to.route.id will be null.
If the navigation will (if not cancelled) cause the document to unload — in other words 'leave' navigations and 'link' navigations where navigation.to.route === null — navigation.willUnload is true.
beforeNavigate must be called during a component initialization. It remains active as long as the component is mounted.
beforeNavigate,
function disableScrollHandling(): voidIf called when the page is being updated following a navigation (in onMount or afterNavigate or an action, for example), this disables SvelteKit’s built-in scroll handling.
This is generally discouraged, since it breaks user expectations.
disableScrollHandling,
function goto(url: string | URL, opts?: {
replaceState?: boolean | undefined;
noScroll?: boolean | undefined;
keepFocus?: boolean | undefined;
invalidateAll?: boolean | undefined;
invalidate?: (string | URL | ((url: URL) => boolean))[] | undefined;
state?: App.PageState | undefined;
} | undefined): Promise<void>
Allows you to navigate programmatically to a given route, with options such as keeping the current element focused.
Returns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) to the specified url.
For external URLs, use window.location = url instead of calling goto(url).
goto,
function invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>Causes any load functions belonging to the currently active page to re-run if they depend on the url in question, via fetch or depends. Returns a Promise that resolves when the page is subsequently updated.
If the argument is given as a string or URL, it must resolve to the same URL that was passed to fetch or depends (including query parameters).
To create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:state) — this is a valid URL.
The function argument can be used define a custom predicate. It receives the full URL and causes load to rerun if true is returned.
This can be useful if you want to invalidate based on a pattern instead of a exact match.
// Example: Match '/path' regardless of the query parameters
import { function invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>Causes any load functions belonging to the currently active page to re-run if they depend on the url in question, via fetch or depends. Returns a Promise that resolves when the page is subsequently updated.
If the argument is given as a string or URL, it must resolve to the same URL that was passed to fetch or depends (including query parameters).
To create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:state) — this is a valid URL.
The function argument can be used define a custom predicate. It receives the full URL and causes load to rerun if true is returned.
This can be useful if you want to invalidate based on a pattern instead of a exact match.
// Example: Match '/path' regardless of the query parameters
import { invalidate } from '$app/navigation';
invalidate((url) => url.pathname === '/path');
invalidate } from '$app/navigation';
function invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>Causes any load functions belonging to the currently active page to re-run if they depend on the url in question, via fetch or depends. Returns a Promise that resolves when the page is subsequently updated.
If the argument is given as a string or URL, it must resolve to the same URL that was passed to fetch or depends (including query parameters).
To create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:state) — this is a valid URL.
The function argument can be used define a custom predicate. It receives the full URL and causes load to rerun if true is returned.
This can be useful if you want to invalidate based on a pattern instead of a exact match.
// Example: Match '/path' regardless of the query parameters
import { invalidate } from '$app/navigation';
invalidate((url) => url.pathname === '/path');
invalidate((url: URLurl) => url: URLurl.URL.pathname: stringpathname === '/path');
invalidate,
function invalidateAll(): Promise<void>Causes all load functions belonging to the currently active page to re-run. Returns a Promise that resolves when the page is subsequently updated.
invalidateAll,
function onNavigate(callback: (navigation: import("@sveltejs/kit").OnNavigate) => MaybePromise<void | (() => void)>): voidA lifecycle function that runs the supplied callback immediately before we navigate to a new URL except during full-page navigations.
If you return a Promise, SvelteKit will wait for it to resolve before completing the navigation. This allows you to — for example — use document.startViewTransition. Avoid promises that are slow to resolve, since navigation will appear stalled to the user.
If a function (or a Promise that resolves to a function) is returned from the callback, it will be called once the DOM has updated.
onNavigate must be called during a component initialization. It remains active as long as the component is mounted.
onNavigate,
function preloadCode(pathname: string): Promise<void>Programmatically imports the code for routes that haven’t yet been fetched.
Typically, you might call this to speed up subsequent navigation.
You can specify routes by any matching pathname such as /about (to match src/routes/about/+page.svelte) or /blog/* (to match src/routes/blog/[slug]/+page.svelte).
Unlike preloadData, this won’t call load functions.
Returns a Promise that resolves when the modules have been imported.
preloadCode,
function preloadData(href: string): Promise<{
type: "loaded";
status: number;
data: Record<string, any>;
} | {
type: "redirect";
location: string;
}>
Programmatically preloads the given page, which means
- ensuring that the code for the page is loaded, and
- calling the page’s load function with the appropriate options.
This is the same behaviour that SvelteKit triggers when the user taps or mouses over an <a> element with data-sveltekit-preload-data.
If the next navigation is to href, the values returned from load will be used, making navigation instantaneous.
Returns a Promise that resolves with the result of running the new route’s load functions once the preload is complete.
preloadData,
function pushState(url: string | URL, state: App.PageState): voidProgrammatically create a new history entry with the given page.state. To use the current URL, you can pass '' as the first argument. Used for shallow routing.
pushState,
function replaceState(url: string | URL, state: App.PageState): voidProgrammatically replace the current history entry with the given page.state. To use the current URL, you can pass '' as the first argument. Used for shallow routing.
replaceState
} from '$app/navigation';afterNavigate
一个在当前组件挂载时运行提供的 回调 的生命周期函数,并且每次我们导航到 URL 时也会运行。
afterNavigate 必须在组件初始化期间调用。只要组件挂载,它就保持激活状态。
function afterNavigate(
callback: (
navigation: import('@sveltejs/kit').AfterNavigate
) => void
): void;在导航之前
一个在我们导航到 URL 之前触发的导航拦截器,无论是通过点击链接、调用goto(...),还是使用浏览器的后退/前进控件。
调用 cancel() 将阻止导航完成。如果 navigation.type === 'leave' —— 表示用户正在离开应用(或关闭标签页)—— 调用 cancel 将触发原生的浏览器卸载确认对话框。在这种情况下,导航可能会取消,也可能不会取消,具体取决于用户的响应。
當導航不是指向 SvelteKit 擁有的路徑(因此由 SvelteKit 的客戶端路由器控制)時,navigation.to.route.id將會是null。
如果导航(如果没有取消)会导致文档卸载——换句话说,'离开'导航和'链接'导航,其中navigation.to.route === null——则navigation.willUnload为true。
beforeNavigate 必须在组件初始化期间调用。只要组件挂载,它就保持激活状态。
function beforeNavigate(
callback: (
navigation: import('@sveltejs/kit').BeforeNavigate
) => void
): void;禁用滚动处理
如果页面在导航后更新时被调用(在onMount或afterNavigate或执行某个操作时,例如),这将禁用 SvelteKit 的内置滚动处理。这通常是不被推荐的,因为它会打破用户的期望。
function disableScrollHandling(): void;转到
允许您以编程方式导航到指定路由,包括保持当前元素聚焦等选项。返回一个当 SvelteKit 导航(或未能导航,此时承诺拒绝)到指定 url 时解决的 Promise。
对于外部 URL,请使用window.location = url代替调用goto(url)。
function goto(
url: string | URL,
opts?:
| {
replaceState?: boolean | undefined;
noScroll?: boolean | undefined;
keepFocus?: boolean | undefined;
invalidateAll?: boolean | undefined;
invalidate?:
| (string | URL | ((url: URL) => boolean))[]
| undefined;
state?: App.PageState | undefined;
}
| undefined
): Promise<void>;无效
导致属于当前活动页面的任何加载函数在它们依赖于所涉及的问题URL的情况下重新运行,通过fetch或depends。当页面随后更新时,返回一个Promise,该 Promise 将解决。
如果参数以字符串或URL的形式给出,它必须解析为传递给fetch或depends(包括查询参数)的相同 URL。要创建自定义标识符,请使用以[a-z]+:(例如custom:state)开头的字符串——这是一个有效的 URL。
The function argument can be used to define a custom predicate. It receives the full URL and causes load to rerun if true is returned. This can be useful if you want to invalidate based on a pattern instead of an exact match.
// Example: Match '/path' regardless of the query parameters
import { function invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>Causes any load functions belonging to the currently active page to re-run if they depend on the url in question, via fetch or depends. Returns a Promise that resolves when the page is subsequently updated.
If the argument is given as a string or URL, it must resolve to the same URL that was passed to fetch or depends (including query parameters).
To create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:state) — this is a valid URL.
The function argument can be used define a custom predicate. It receives the full URL and causes load to rerun if true is returned.
This can be useful if you want to invalidate based on a pattern instead of a exact match.
// Example: Match '/path' regardless of the query parameters
import { invalidate } from '$app/navigation';
invalidate((url) => url.pathname === '/path');
invalidate } from '$app/navigation';
function invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>Causes any load functions belonging to the currently active page to re-run if they depend on the url in question, via fetch or depends. Returns a Promise that resolves when the page is subsequently updated.
If the argument is given as a string or URL, it must resolve to the same URL that was passed to fetch or depends (including query parameters).
To create a custom identifier, use a string beginning with [a-z]+: (e.g. custom:state) — this is a valid URL.
The function argument can be used define a custom predicate. It receives the full URL and causes load to rerun if true is returned.
This can be useful if you want to invalidate based on a pattern instead of a exact match.
// Example: Match '/path' regardless of the query parameters
import { invalidate } from '$app/navigation';
invalidate((url) => url.pathname === '/path');
invalidate((url: URLurl) => url: URLurl.URL.pathname: stringpathname === '/path');function invalidate(
resource: string | URL | ((url: URL) => boolean)
): Promise<void>;无效所有
导致当前活动页面中属于所有 load 函数重新运行。返回一个在页面随后更新时解决的 Promise。
function invalidateAll(): Promise<void>;在导航中
一个在导航到新 URL 之前立即运行提供的回调的生命周期函数,除了在整页导航期间。
如果您返回一个 Promise,SvelteKit 将在完成导航之前等待其解析。这允许您——例如——使用 document.startViewTransition。避免解析缓慢的承诺,因为导航将看起来对用户停滞不前。
如果从回调中返回一个函数(或一个解析为函数的 Promise),则将在 DOM 更新后调用该函数。
onNavigate必须在组件初始化期间调用。只要组件挂载,它就保持激活状态。
function onNavigate(
callback: (
navigation: import('@sveltejs/kit').OnNavigate
) => MaybePromise<(() => void) | void>
): void;预加载代码
程序化导入尚未获取的路由代码。通常,您可能会调用此功能以加快后续导航。
您可以通过任何匹配的路径名来指定路由,例如 /about(以匹配 src/routes/about/+page.svelte)或 /blog/*(以匹配 src/routes/blog/[slug]/+page.svelte )。
不同于 preloadData,这不会调用 load 函数。返回一个在模块导入完成后解决的 Promise。
function preloadCode(pathname: string): Promise<void>;预载数据
程序预加载指定页面,即
- 确保页面代码已加载,
- 调用页面加载函数,使用适当的选项。
这是 SvelteKit 在用户点击或鼠标悬停在具有<a>元素和data-sveltekit-preload-data的情况下触发的相同行为。如果下一次导航到href,将使用加载返回的值,使导航瞬间完成。在预加载完成后,返回一个解析为新路由load函数运行结果的 Promise。
function preloadData(href: string): Promise<
| {
type: 'loaded';
status: number;
data: Record<string, any>;
}
| {
type: 'redirect';
location: string;
}
>;pushState
程序创建一个新的历史条目,使用给定的 page.state。要使用当前 URL,可以将''作为第一个参数传递。用于浅层路由。
function pushState(
url: string | URL,
state: App.PageState
): void;替换状态
程序替换当前历史条目为给定的 page.state。要使用当前 URL,可以将 '' 作为第一个参数传递。用于 浅层路由。
function replaceState(
url: string | URL,
state: App.PageState
): void;Edit this page on GitHub llms.txt