Skip to main content
SvelteKitReference

$app/navigation

import {
	afterNavigate,
	beforeNavigate,
	disableScrollHandling,
	goto,
	invalidate,
	invalidateAll,
	onNavigate,
	preloadCode,
	preloadData,
	pushState,
	refreshAll,
	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 { invalidate } from '$app/navigation';

invalidate((url) => url.pathname === '/path');
function invalidate(
	resource: string | URL | ((url: URL) => boolean)
): Promise<void>;

invalidateAll

Provoque la ré-exécution de toutes les fonctions load et query 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

  1. l’on s’assure que le code pour la page est chargé, et
  2. l’on exécute les fonctions load de 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

précédent suivant
$app/forms