$app/navigation

import {
	function afterNavigate(callback: (navigation: AfterNavigate) => void): void
A 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: BeforeNavigate) => void): void
A 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(): void
If 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?: GotoOptions): Promise<void>
Allows you to navigate programmatically to a given route, with control over details such as whether scroll and focus are reset
(as they would be with a regular navigation) or preserved.
Returns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) or the state change has been applied.
goto is intended for navigations to routes that belong to the app, and will reject if a route cannot be resolved.
For external URLs, use window.location = url to perform a full-page navigation instead of calling goto(url).
@param
url Where to navigate to. Note that if you've set config.paths.base and the URL is root-relative, you need to prepend the base path if you want to navigate within the app.
@param
opts Options related to the navigationgoto,
	function invalidate(resource: string | URL | ((url: URL) => boolean), keepState?: 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), keepState?: 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');
@param
resource The invalidated URL
@param
keepState If true, the current page.state will be preserved. Otherwise, it will be reset to an empty object. false by default.
referenceinvalidate } from '$app/navigation';

function invalidate(resource: string | URL | ((url: URL) => boolean), keepState?: 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');
@param
resource The invalidated URL
@param
keepState If true, the current page.state will be preserved. Otherwise, it will be reset to an empty object. false by default.
referenceinvalidate((url: URLurl) => url: URLurl.URL.pathname: string
The pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.
MDN Reference
pathname === '/path');
@param
resource The invalidated URL
@param
keepState If true, the current page.state will be preserved. Otherwise, it will be reset to an empty object. false by default.invalidate,
	function invalidateAll(): Promise<void>
Causes all load and query functions belonging to the currently active page to re-run. Returns a Promise that resolves when the page is subsequently updated.
Note that this resets page.state to an empty object. If you want to preserve page.state (for example when using shallow routing), use refreshAll instead.
@deprecated
Use refreshAll instead. Unlike invalidateAll, refreshAll does not reset page.state.invalidateAll,
	function onNavigate(callback: (navigation: OnNavigate) => MaybePromise<void | (() => void)>): void
A 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(id: import("$app/types").RouteId): Promise<void>
Programmatically imports the code for routes that haven't yet been fetched.
Typically, you might call this to speed up subsequent navigation.
Takes a route ID such as /about or /blog/[slug]. Unlike pathnames, route IDs
are never prefixed with the app's base path.
If you have a pathname rather than a route ID, you can convert it with
match from $app/paths:
import { match } from '$app/paths';
import { preloadCode } from '$app/navigation';

const matched = await match('/blog/hello-world');
if (matched) await preloadCode(matched.id);
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";
    data: Record<string, any>;
} | {
    type: "redirect";
    location: string;
} | {
    type: "error";
    error: App.Error;
}) & {
    status: number;
}>
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.
@param
href Page to preloadpreloadData,
	function pushState(url: string | URL, state: App.PageState): Promise<void>
Programmatically create a new history entry with the given page.state. Used for shallow routing.
@deprecated
Use goto(url, { state, shallow: true }) instead.pushState,
	function refreshAll(): Promise<void>
Causes all currently active remote functions to refresh, and all load functions belonging to the currently active page to re-run.
Returns a Promise that resolves when the page is subsequently updated.
refreshAll,
	function replaceState(url: string | URL, state: App.PageState): Promise<void>
Programmatically replace the current history entry with the given page.state. Used for shallow routing.
@deprecated
Use goto(url, { state, shallow: true, replace: true }) instead.replaceState,
	
function snapshot<T>(options: {
    id?: string;
    capture: () => T;
    restore: (value: T) => void;
    reset?: () => void;
}): void
A lifecycle function that captures state before navigating and restores it when traversing history.
By default, the snapshot id is generated from the call site. Pass an explicit id to keep snapshots stable across deployments or distinguish multiple uses of a shared helper.
The optional reset callback runs on navigations where there is no captured value to restore, such as when a new history entry is created. Captured values are serialized with the app's transport hook.
snapshot must be called during a component initialization. It remains active as long as the component is mounted.
snapshot
} from '$app/navigation';

// Example: Match '/path' regardless of the query parameters
import { function invalidate(resource: string | URL | ((url: URL) => boolean), keepState?: 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');
@param
resource The invalidated URL
@param
keepState If true, the current page.state will be preserved. Otherwise, it will be reset to an empty object. false by default.
referenceinvalidate } from '$app/navigation';

function invalidate(resource: string | URL | ((url: URL) => boolean), keepState?: 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');
@param
resource The invalidated URL
@param
keepState If true, the current page.state will be preserved. Otherwise, it will be reset to an empty object. false by default.
referenceinvalidate((url: URLurl) => url: URLurl.URL.pathname: string
The pathname property of the URL interface represents a location in a hierarchical structure. It is a string constructed from a list of path segments, each of which is prefixed by a / character.
MDN Reference
pathname === '/path');

import { 
function match(url: URL | string): Promise<{ [K in RouteId]: {
    id: K;
    params: RouteParams<K>;
}; }[RouteId] | null>
Match a path or URL to a route ID and extracts any parameters.
@example
import { match } from '$app/paths';

const route = await match('blog/hello-world');

if (route?.id === '/blog/[slug]') {
	const slug = route.params.slug;
	const response = await fetch(`/api/posts/${slug}`);
	const post = await response.json();
}
@since
2.52.0
referencematch } from '$app/paths';
import { function preloadCode(id: import("$app/types").RouteId): Promise<void>
Programmatically imports the code for routes that haven't yet been fetched.
Typically, you might call this to speed up subsequent navigation.
Takes a route ID such as /about or /blog/[slug]. Unlike pathnames, route IDs
are never prefixed with the app's base path.
If you have a pathname rather than a route ID, you can convert it with
match from $app/paths:
import { match } from '$app/paths';
import { preloadCode } from '$app/navigation';

const matched = await match('/blog/hello-world');
if (matched) await preloadCode(matched.id);
Unlike preloadData, this won't call load functions.
Returns a Promise that resolves when the modules have been imported.
referencepreloadCode } from '$app/navigation';

const 
const matched: {
    id: string;
    params: Record<string, string>;
} | nullmatched = await 
function match(url: URL | string): Promise<{ [K in RouteId]: {
    id: K;
    params: RouteParams<K>;
}; }[RouteId] | null>
Match a path or URL to a route ID and extracts any parameters.
@example
import { match } from '$app/paths';

const route = await match('blog/hello-world');

if (route?.id === '/blog/[slug]') {
	const slug = route.params.slug;
	const response = await fetch(`/api/posts/${slug}`);
	const post = await response.json();
}
@since
2.52.0
referencematch('/blog/hello-world');
if (
const matched: {
    id: string;
    params: Record<string, string>;
} | nullmatched) await function preloadCode(id: import("$app/types").RouteId): Promise<void>
Programmatically imports the code for routes that haven't yet been fetched.
Typically, you might call this to speed up subsequent navigation.
Takes a route ID such as /about or /blog/[slug]. Unlike pathnames, route IDs
are never prefixed with the app's base path.
If you have a pathname rather than a route ID, you can convert it with
match from $app/paths:
import { match } from '$app/paths';
import { preloadCode } from '$app/navigation';

const matched = await match('/blog/hello-world');
if (matched) await preloadCode(matched.id);
Unlike preloadData, this won't call load functions.
Returns a Promise that resolves when the modules have been imported.
referencepreloadCode(
const matched: {
    id: string;
    params: Record<string, string>;
}matched.id: stringid);