メインコンテンツへスキップ

$app/navigation

import {
	function afterNavigate(callback: (navigation: import("@sveltejs/kit").AfterNavigate) => void): void

A lifecycle function that runs the supplied callback when the current component mounts, and also whenever we navigate to a new 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): void

A navigation interceptor that triggers before we navigate to a new 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 === nullnavigation.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?: {
    replaceState?: boolean | undefined;
    noScroll?: boolean | undefined;
    keepFocus?: boolean | undefined;
    invalidateAll?: boolean | undefined;
    state?: App.PageState | undefined;
} | undefined): Promise<void>

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).

@paramurl Where to navigate to. Note that if you've set config.kit.paths.base and the URL is root-relative, you need to prepend the base path if you want to navigate within the app.
@paramopts Options related to the navigation
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');
@paramresource The invalidated URL
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)>): 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(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

  1. ensuring that the code for the page is loaded, and
  2. 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 &#x3C;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.

@paramhref Page to preload
preloadData
,
function pushState(url: string | URL, state: App.PageState): void

Programmatically 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): void

Programmatically 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に移動するたびに、指定されたcallbackを実行するライフサイクル関数です。

afterNavigateは、コンポーネントの初期化中に呼び出す必要があります。コンポーネントがマウントされている限りアクティブなままです。

function afterNavigate(
	callback: (
		navigation: import('@sveltejs/kit').AfterNavigate
	) => void
): void;

beforeNavigate

リンクをクリックしたり、goto(...)を呼び出したり、ブラウザの戻る/進むコントロールを使用したりして、新しいURLに移動する前にトリガーされるナビゲーションインターセプターです。

cancel()を呼び出すと、ナビゲーションの完了が阻止されます。navigation.type === 'leave'の場合(つまり、ユーザーがアプリから移動しているか、タブを閉じている場合)、cancelを呼び出すと、ネイティブのブラウザのアンロード確認ダイアログがトリガーされます。この場合、ユーザーの応答に応じてナビゲーションがキャンセルされる場合とされない場合があります。

ナビゲーションがSvelteKitが所有するルートではない場合(したがって、SvelteKitのクライアントサイドルーターによって制御されていない場合)、navigation.to.route.idnullになります。

ナビゲーションが(キャンセルされない場合)ドキュメントのアンロードを引き起こす場合(言い換えれば、'leave'ナビゲーションと、navigation.to.route === nullである'link'ナビゲーションの場合)、navigation.willUnloadtrueです。

beforeNavigateは、コンポーネントの初期化中に呼び出す必要があります。コンポーネントがマウントされている限りアクティブなままです。

function beforeNavigate(
	callback: (
		navigation: import('@sveltejs/kit').BeforeNavigate
	) => void
): void;

disableScrollHandling

ナビゲーション後のページの更新中(たとえば、onMountafterNavigate、またはアクション内)に呼び出された場合、SvelteKitの組み込みスクロール処理が無効になります。これはユーザーの期待を裏切るため、一般的には推奨されません。

function disableScrollHandling(): void;

goto

SvelteKitが指定されたurlへのナビゲートに成功(またはナビゲートに失敗、その場合はPromiseが拒否されます)した場合に解決されるPromiseを返します。外部URLの場合は、goto(url)を呼び出す代わりにwindow.location = urlを使用してください。

function goto(
	url: string | URL,
	opts?:
		| {
				replaceState?: boolean | undefined;
				noScroll?: boolean | undefined;
				keepFocus?: boolean | undefined;
				invalidateAll?: boolean | undefined;
				state?: App.PageState | undefined;
		  }
		| undefined
): Promise<void>;

invalidate

現在アクティブなページに属するload関数が、fetchまたはdependsを介して問題のurlに依存している場合、再度実行されます。ページが後で更新されたときに解決されるPromiseを返します。

引数がstringまたはURLとして指定された場合、fetchまたはdependsに渡されたものと同じURL(クエリパラメータを含む)に解決される必要があります。カスタム識別子を作成するには、[a-z]+:(例:custom:state)で始まる文字列を使用します。これは有効なURLです。

function引数を使用すると、カスタム述語を定義できます。完全なURLを受け取り、trueが返された場合にloadを再実行させます。これは、完全一致ではなくパターンに基づいて無効にしたい場合に役立ちます。

// 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');
@paramresource The invalidated URL
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');
@paramresource The invalidated URL
invalidate
((url: URLurl) => url: URLurl.URL.pathname: stringpathname === '/path');
function invalidate(
	resource: string | URL | ((url: URL) => boolean)
): Promise<void>;

invalidateAll

現在アクティブなページに属するすべてのload関数を再実行させます。ページが後で更新されたときに解決されるPromiseを返します。

function invalidateAll(): Promise<void>;

onNavigate

全ページナビゲーション時を除き、新しいURLに移動する直前に、指定されたcallbackを実行するライフサイクル関数です。

Promiseを返す場合、SvelteKitはナビゲーションを完了する前にそれが解決されるのを待ちます。これにより、たとえばdocument.startViewTransitionを使用できます。解決に時間がかかるPromiseは、ユーザーに対してナビゲーションが停滞しているように見えるため、避けてください。

コールバックから関数(または関数に解決されるPromise)が返された場合、DOMが更新された後に呼び出されます。

onNavigateは、コンポーネントの初期化中に呼び出す必要があります。コンポーネントがマウントされている限りアクティブなままです。

function onNavigate(
	callback: (
		navigation: import('@sveltejs/kit').OnNavigate
	) => MaybePromise<(() => void) | void>
): void;

preloadCode

まだフェッチされていないルートのコードをプログラムでインポートします。通常、これは後続のナビゲーションを高速化するために呼び出す場合があります。

/aboutsrc/routes/about/+page.svelteに一致)や/blog/*src/routes/blog/[slug]/+page.svelteに一致)など、一致するパス名でルートを指定できます。

preloadDataとは異なり、これはload関数を呼び出しません。モジュールがインポートされたときに解決されるPromiseを返します。

function preloadCode(pathname: string): Promise<void>;

preloadData

指定されたページをプログラムでプリロードします。つまり

  1. ページのコードがロードされていることを確認し、
  2. 適切なオプションを使用してページのロード関数を呼び出します。

これは、ユーザーがdata-sveltekit-preload-dataを持つ<a>要素をタップまたはマウスオーバーしたときにSvelteKitがトリガーするのと同じ動作です。次のナビゲーションが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;

replaceState

指定された$page.stateでプログラムで現在の履歴エントリを置き換えます。現在のURLを使用するには、最初の引数として''を渡すことができます。シャロー ルーティングに使用されます。

function replaceState(
	url: string | URL,
	state: App.PageState
): void;

GitHubでこのページを編集

前へ 次へ