$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;
}): 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 { invalidate } from '$app/navigation';
invalidate((url) => url.pathname === '/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 refreshAll({ includeLoadFunctions }?: {
includeLoadFunctions?: boolean;
}): Promise<void>
Causes all currently active remote functions to refresh, and all load functions belonging to the currently active page to re-run (unless disabled via the option argument).
Returns a Promise that resolves when the page is subsequently updated.
refreshAll,
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
Une fonction de cycle de vie qui exécute le callback fourni lorsque le composant courant est
monté, ainsi que lorsque l’on navigue vers une URL.
afterNavigate doit être appelée lors de l’initialisation d’un composant. Elle reste active aussi
longtemps que le composant reste monté.
function afterNavigate(
callback: (
navigation: import('@sveltejs/kit').AfterNavigate
) => void
): void;beforeNavigate
Un intercepteur de navigation qui se déclenche lorsque l’on navigue vers une URL, soit en cliquant
sur lien, en appelant goto(...), ou en utilisant les boutons précédent/suivant.
Appeler cancel() va empêcher la navigation de se terminer. Si navigation.type === 'leave' — ce
qui veut dire que l’utilisateur ou utilisatrice est en train de quitter l’application (ou de fermer
l’onglet) — appeler cancel va déclencher la boîte de dialogue de confirmation native du
navigateur demandant si l’on souhaite quitter l’application. Dans ce cas, la navigation peut être
annulée ou non en fonction de la réponse fournie.
Lorsqu’une navigation ne se dirige pas vers une route appartenant à SvelteKit (donc non contrôlée
par le routeur client de SvelteKit), navigation.to.route.id a pour valeur null.
Si la navigation (lorsque non annulée) provoque le déchargement du document — autrement dit les
navigation 'leave' et 'link' où navigation.to.route === null — navigation.willUnload a une
valeur de true.
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 doit être appelée lors de l’initialisation d’un composant. Elle reste active aussi
longtemps que le composant reste monté.
function beforeNavigate(
callback: (
navigation: import('@sveltejs/kit').BeforeNavigate
) => void
): void;disableScrollHandling
Si appelée lorsque la page est en train d’être mise à jour à la suite d’une navigation (dans
onMount ou afterNavigate ou une action, par exemple), cette méthode désactive la gestion du
défilement intégrée de SvelteKit.
Ceci est généralement déconseillé, puisque cela va à l’encontre des attentes des utilisateurs et
utilisatrices.
function disableScrollHandling(): void;goto
Vous permet de naviguer programmatiquement vers une route donnée, avec des options permettant
notamment de garder sur le focus sur l’élément courant.
Renvoie une Promise qui se résout lorsque SvelteKit navigue (ou échoue à naviguer, auquel cas la
promesse échoue) vers l’url fournie.
Pour les URLs externes, utilisez window.location = url plutôt que d’appeler 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;
}
): Promise<void>;invalidate
Provoque la ré-exécution de toutes les fonctions load appartenant à la page actuellement active si
celles-ci dépendent de l’url en question, via fetch ou depends. Renvoie une Promise qui se
résout lorsque la page est mise à jour en conséquence.
Si l’argument est fourni en tant que string ou URL, il doit correspondre à la même URL qui aura
été passé à fetch ou depends (en incluant les paramètres de requête).
Pour créer un identifiant personnalisé, utilisez une chaîne de caractères commençant par [a-z]+:
(par ex. custom:state) — il s’agit en effet d’une URL valide.
L’argument function peut être utilisé pour définir un prédicat personnalisé. La fonction reçoit
l’URL complète et provoque la ré-exécution de load si la valeur true est renvoyée.
Ceci peut être utilse si vous souhaitez invalider en fonction d’un motif plutôt que d’un match
exact.
// Exemple : Correspond à '/path' peu importe les paramètres de requête
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>;invalidateAll
Provoque la ré-exécution de toutes les fonctions load appartenant à la page actuellement active.
Renvoie une Promise qui se résout lorsque la page est mise en jour en conséquence.
function invalidateAll(): Promise<void>;onNavigate
Une fonction de cycle de vie qui exécute le callback fourni immédiatement avant la navigation vers
une nouvelle URL, sauf lors des navigations “complètes” (rechargeant entièrement la page).
Si vous renvoyez une Promise, SvelteKit attendra sa résolution avant de terminer la navigation.
Cela vous permet — par exemple — d’utiliser document.startViewTransition. Évitez les promesses qui
mettent du temps à résoudre, puisque la navigation apparaîtra comme lente à l’utilisateur ou
utilisatrice.
Si une fonction (ou une Promise résolvant en une fonction) est renvoyée du callback, elle sera
exécutée une fois la mise à jour du DOM terminée.
onNavigate doit être exécutée lors de l’initialisation d’un composant. Elle reste active aussi
longtemps que le composant reste monté.
function onNavigate(
callback: (
navigation: import('@sveltejs/kit').OnNavigate
) => MaybePromise<(() => void) | void>
): void;preloadCode
Importe programmatiquement le code des routes qui n’a pas encore été récupéré. Typiquement, vous pourriez appeler cette méthode pour accélerer les navigations à venir.
Vous pouvez préciser les routes en utilisant n’importe quel chemin correspondant, comme /about
(pour cibler src/routes/about/+page.svelte) ou /blog/* (pour cibler
src/routes/blog/[slug]/+page.svelte).
À la différence de preloadData, ceci n’exécutera aucune fonction load.
Renvoie une Promise qui se résout lorsque les modules ont été importés.
function preloadCode(pathname: string): Promise<void>;preloadData
Précharge programmatiquement la page demandée, ce qui implique que
- l’on s’assure que le code pour la page est chargé, et
- l’on exécute les fonctions
loadde la page avec les options appropriées.
Ceci est le même comportement qui est déclenché par SvelteKit lorsque l’utilisateur ou utilisatrice
appuie ou survole un élément <a> ayant l’attribut data-sveltekit-preload-data.
Si la prochaine navigation est vers href, les valeurs renvoyées par la fonction load seront
utilisées, rendant la navigation instantanée.
Renvoie une Promise qui se résout avec le résultat de l’exécution des fonctions load de la
nouvelle route une fois le préchargement terminé.
function preloadData(href: string): Promise<
| {
type: 'loaded';
status: number;
data: Record<string, any>;
}
| {
type: 'redirect';
location: string;
}
>;pushState
Crée programmatiquement une nouvelle entrée d’historique avec le page.state fourni. Pour utiliser
l’URL courante, vous pouvez passer '' comme premier argument. Utilisé pour le shallow
routing.
function pushState(
url: string | URL,
state: App.PageState
): void;refreshAll
Provoque la mise-à-jour de toutes les fonctions distantes actuellement actives, et la ré-exécution
de toutes les fonctions load appartenant à la page actuellement active (à moins qu’elles ne soient
désactivées via l’argument en option).
Renvoie une Promise qui est résolue lorsque la page a terminé sa mise à jour.
function refreshAll({
includeLoadFunctions
}?: {
includeLoadFunctions?: boolean;
}): Promise<void>;replaceState
Remplace programmatiquement l’entrée d’historique courante avec la page.state fourni. Pour
utiliser l’URL courante, vous pouvez passer '' comme premier argument. Utilisé pour le shallow
routing.
function replaceState(
url: string | URL,
state: App.PageState
): void;Modifier cette page sur Github llms.txt