リンク

Inertiaアプリケーション内で他のページへのリンクを作成するには、通常、Inertiaの<Link>を使用します。コンポーネントを使用します。このコンポーネントは、クリックイベントをインターセプトしてページ全体の再読み込みを防ぐ標準的なアンカー<a>リンクの軽量なラッパーです。これは、 Inertiaがアプリケーションの読み込み後にシングルページアプリケーションのエクスペリエンスを提供する仕組みです。

リンクの作成

Inertiaリンクを作成するには、Inertiaの<Link>コンポーネントを使用します。このコンポーネントに指定した属性は、基になるHTMLタグにプロキシされます。

import { Link } from '@inertiajs/vue3'

<Link href="/">Home</Link>

デフォルトでは、Inertiaはリンクをアンカー<a>要素としてレンダリングします。ただし、asプロパティを使用してタグを変更できます。

import { Link } from '@inertiajs/vue3'

<Link href="/logout" method="post" as="button" type="button">Logout</Link>

// Renders as...
<button type="button">Logout</button>

メソッド

InertiaリンクのリクエストにHTTPリクエストメソッドを指定するには、methodプロパティを使用します。リンクで使用されるデフォルトのメソッドはGETですが、methodプロパティを使用して、 リンク経由でPOST、PUT、PATCH、およびDELETEリクエストを行うことができます。

import { Link } from '@inertiajs/vue3'

<Link href="/logout" method="post" as="button">Logout</Link>

データ

POSTまたはPUTリクエストを行う際に、リクエストに追加のデータを追加したい場合があります。これはdataプロパティを使用して実現できます。提供されるデータはobjectまたは FormDataインスタンスです。

import { Link } from '@inertiajs/vue3'

<Link href="/endpoint" method="post" :data="{ foo: bar }">Save</Link>

カスタムヘッダー

headersプロパティを使用すると、Inertiaリンクにカスタムヘッダーを追加できます。ただし、Inertiaが内部的にサーバーに状態を伝えるために使用するヘッダーは優先度が高いため、上書きすることはできません。

import { Link } from '@inertiajs/vue3'

<Link href="/endpoint" :headers="{ foo: bar }">Save</Link>

ブラウザ履歴

replaceプロパティを使用すると、ブラウザの履歴の動作を指定できます。デフォルトでは、ページへのアクセスは、履歴に（新しい）状態（window.history.pushState）をプッシュします。ただし、replaceプロパティをtrueに設定することで、状態（window.history.replaceState）を置き換えることもできます。これにより、アクセスは、スタックに新しい履歴状態を追加する代わりに、現在の履歴状態を置き換えます。

import { Link } from '@inertiajs/vue3'

<Link href="/" replace>Home</Link>

状態の保持

preserve-stateプロパティを使用して、ページコンポーネントのローカル状態を保持できます。これにより、ページコンポーネントが完全に再レンダリングされるのを防ぎます。preserve-stateプロパティは、フォームを含むページで特に役立ちます。手動で入力フィールドに再入力することを避け、フォーカスされた入力を維持できるためです。

import { Link } from '@inertiajs/vue3'

<input v-model="query" type="text" />

<Link href="/search" :data="{ query }" preserve-state>Search</Link>

スクロールの保持

preserveScrollプロパティを使用して、ページへのアクセス時にInertiaが自動的にスクロール位置をリセットするのを防ぐことができます。

import { Link } from '@inertiajs/vue3'

<Link href="/" preserve-scroll>Home</Link>

スクロール位置の管理に関する詳細については、ドキュメントの スクロール管理.

部分的なリロード

を参照してください。onlyプロパティを使用すると、ページのプロパティ（データ）のサブセットのみを、そのページへの以降のアクセスでサーバーから取得する必要があることを指定できます。

import { Link } from '@inertiajs/vue3'

<Link href="/users?active=true" :only="['users']">Show active</Link>

このトピックの詳細については、完全なドキュメントの 部分的なリロード.

を参照してください。

アクティブ状態

import { Link } from '@inertiajs/vue3'

// URL exact match...
<Link href="/users" :class="{ 'active': $page.url === '/users' }">Users</Link>

// Component exact match...
<Link href="/users" :class="{ 'active': $page.component === 'Users/Index' }">Users</Link>

// URL starts with (/users, /users/create, /users/1, etc.)...
<Link href="/users" :class="{ 'active': $page.url.startsWith('/users') }">Users</Link>

// Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
<Link href="/users" :class="{ 'active': $page.component.startsWith('Users') }">Users</Link>

現在のページに基づいてナビゲーションリンクのアクティブ状態を設定することが望ましいことがよくあります。これは、Inertiaを使用する場合、pageオブジェクトを調べて、page.urlおよびpage.componentプロパティに対して文字列比較を行うことで実現できます。

完全一致比較（===）、startsWith()比較（ページのサブセットを一致させるのに役立ちます）、または正規表現を使用したより複雑な比較を実行できます。