手動によるページ遷移

リンクの作成に加えて リンクの作成、JavaScript を通じてプログラム的に Inertia のページ遷移/リクエストを手動で行うことも可能です。これは、router.visit() メソッドによって実現されます。

import { router } from '@inertiajs/vue3'

router.visit(url, {
  method: 'get',
  data: {},
  replace: false,
  preserveState: false,
  preserveScroll: false,
  only: [],
  headers: {},
  errorBag: null,
  forceFormData: false,
  onCancelToken: cancelToken => {},
  onCancel: () => {},
  onBefore: visit => {},
  onStart: visit => {},
  onProgress: progress => {},
  onSuccess: page => {},
  onError: errors => {},
  onFinish: visit => {},
})

しかし、一般的には Inertia のショートカットリクエストメソッドのいずれかを使用する方が便利です。これらのメソッドは、router.visit() と同じオプションをすべて共有します。

import { router } from '@inertiajs/vue3'

router.get(url, data, options)
router.post(url, data, options)
router.put(url, data, options)
router.patch(url, data, options)
router.delete(url, options)
router.reload(options) // Uses the current URL

reload() メソッドは、preserveState と preserveScroll の両方が true に設定された現在のページを自動的に訪問する便利なショートハンドメソッドであり、現在のページのデータだけをリロードしたい場合に呼び出すのに最適なメソッドです。

メソッド

手動でページ遷移を行う場合、method オプションを使用して、リクエストの HTTP メソッドを get、post、put、patch、または delete に設定できます。デフォルトのメソッドは get です。

import { router } from '@inertiajs/vue3'

router.visit(url, { method: 'post' })
put または patch を介したファイルのアップロードは、Laravel ではサポートされていません。代わりに、_method フィールドを put または patch に設定して、post 経由でリクエストを行います。これは フォームメソッドスプーフィング と呼ばれます。.

データ

data オプションを使用して、リクエストにデータを追加できます。

import { router } from '@inertiajs/vue3'

router.visit('/users', {
  method: 'post',
  data: {
    name: 'John Doe',
    email: 'john.doe@example.com',
  },
})

便宜上、get()、post()、put()、および patch()メソッドはすべて、data を2番目の引数として受け付けます。

import { router } from '@inertiajs/vue3'

router.post('/users', {
  name: 'John Doe',
  email: 'john.doe@example.com',
})

カスタムヘッダー

headers オプションを使用すると、リクエストにカスタムヘッダーを追加できます。

import { router } from '@inertiajs/vue3'

router.post('/users', data, {
  headers: {
    'Custom-Header': 'value',
  },
})
Inertia が内部的に状態をサーバーに伝えるために使用するヘッダーは優先され、上書きすることはできません。

ファイルアップロード

ファイルを含むページ遷移/リクエストを行う場合、Inertia はリクエストデータを自動的に FormData オブジェクトに変換します。FormData オブジェクトを常に使用するようにリクエストを設定する場合は、forceFormData オプションを使用できます。

import { router } from '@inertiajs/vue3'

router.post('/companies', data, {
  forceFormData: true,
})

ファイルのアップロードの詳細については、専用の ファイルアップロードドキュメントを参照してください。

ブラウザ履歴

ページ遷移を行う際、Inertia はブラウザの履歴に新しいエントリを自動的に追加します。ただし、replace オプションを true に設定することで、現在の履歴エントリを置き換えることも可能です。

import { router } from '@inertiajs/vue3'

router.get('/users', { search: 'John' }, { replace: true })
同じ URL へのページ遷移は、自動的に replace を true.

に設定します。

状態の保持

デフォルトでは、同じページへのページ遷移は新しいページコンポーネントインスタンスを作成します。これにより、フォーム入力、スクロール位置、フォーカス状態などのローカル状態は失われます。

しかし、状況によっては、ページコンポーネントの状態を保持する必要がある場合があります。たとえば、フォームを送信する場合、サーバーでのフォームバリデーションが失敗した場合に備えて、フォームデータを保持する必要があります。 このため、post、put、patch、delete、および

reload メソッドはすべて、デフォルトで preserveState オプションを true に設定します。 get メソッドを使用する場合、

import { router } from '@inertiajs/vue3'

router.get('/users', { search: 'John' }, { preserveState: true })

preserveState オプションを true に設定することで、Inertia にコンポーネントの状態を保持するように指示できます。 レスポンスにバリデーションエラーが含まれる場合にのみ状態を保持する場合は、

import { router } from '@inertiajs/vue3'

router.get('/users', { search: 'John' }, { preserveState: 'errors' })

preserveState オプションを "errors" に設定します。

import { router } from '@inertiajs/vue3'

router.post('/users', data, {
  preserveState: (page) => page.props.someProp === 'value',
})

レスポンスに基づいて preserveState オプションを遅延評価することもできます。

スクロールの保持ページ間を移動するとき、Inertia はデフォルトのブラウザの動作を模倣し、ドキュメントボディ（および定義済みの スクロール領域）のスクロール位置をページの先頭に戻します。

preserveScroll オプションを false に設定することで、この動作を無効にできます。

import { router } from '@inertiajs/vue3'

router.visit(url, { preserveScroll: false })

レスポンスにバリデーションエラーが含まれる場合にのみスクロール位置を保持する場合は、 preserveScroll オプションを "errors" に設定します。

import { router } from '@inertiajs/vue3'

router.visit(url, { preserveScroll: 'errors' })

レスポンスに基づいて preserveScroll オプションを遅延評価することもできます。

import { router } from '@inertiajs/vue3'

router.post('/users', data, {
  preserveScroll: (page) => page.props.someProp === 'value',
})

この機能の詳細については、 スクロール管理 ドキュメントを参照してください。

部分的なリロード

only オプションを使用すると、同じページを再度訪問した際にサーバーからプロップス（データ）のサブセットのみを要求できます。これにより、ページが更新する必要のないデータを取得する必要がないため、アプリケーションの効率が向上します。

import { router } from '@inertiajs/vue3'

router.visit('/users', { search: 'John' }, { only: ['users'] })

この機能の詳細については、部分的なリロード を参照してください。ドキュメントを参照してください。

訪問のキャンセル

キャンセルトークンを使用して訪問をキャンセルできます。Inertia は自動的にキャンセルトークンを生成し、 訪問を行う前にonCancelToken() コールバックを介して提供します。

import { router } from '@inertiajs/vue3'

router.post('/users', data, {
  onCancelToken: (cancelToken) => (this.cancelToken = cancelToken),
})

// Cancel the visit...
this.cancelToken.cancel()

onCancel() と onFinish() イベントコールバックは、訪問がキャンセルされたときに実行されます。

イベントコールバック

Inertia のグローバルイベントに加えて、Inertia は訪問ごとにいくつかのイベントコールバックを提供します。

import { router } from '@inertiajs/vue3'

router.post('/users', data, {
  onBefore: (visit) => {},
  onStart: (visit) => {},
  onProgress: (progress) => {},
  onSuccess: (page) => {},
  onError: (errors) => {},
  onCancel: () => {},
  onFinish: visit => {},
})

onBefore() コールバックからfalse を返すと、訪問がキャンセルされます。

import { router } from '@inertiajs/vue3'

router.delete(`/users/${user.id}`, {
  onBefore: () => confirm('Are you sure you want to delete this user?'),
})

onSuccess() と onError() コールバックからプロミスを返すことも可能です。この場合、「終了」イベントは、プロミスが解決されるまで遅延されます。

import { router } from '@inertiajs/vue3'

router.post(url, {
  onSuccess: () => {
    return Promise.all([
      this.doThing(),
      this.doAnotherThing()
    ])
  }
  onFinish: visit => {
    // This won't be called until doThing()
    // and doAnotherThing() have finished.
  },
})