手動訪問

除了建立連結之外，也可以透過 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' })
在 Laravel 中不支援透過 put 或 patch 上傳檔案。相反地，請透過 post 發出請求，並包含一個 _method 欄位，設定為 put 或 patch。這稱為 表單方法欺騙.

數據

您可以使用 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 作為它們的第二個引數。

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 方法，透過將 preserveState 選項設定為 true 來指示 Inertia 保留元件的狀態。

import { router } from '@inertiajs/vue3'

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

如果您只想在回應包含驗證錯誤時才保留狀態，請將 preserveState 選項設定為 "errors"。

import { router } from '@inertiajs/vue3'

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

您也可以透過提供回呼，根據回應來延遲評估 preserveState 選項。

import { router } from '@inertiajs/vue3'

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

滾動保留

在頁面之間導覽時，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() 回呼函式返回一個 Promise。當這樣做時，「完成 (finish)」事件將會延遲到 Promise 解析完成為止。

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