手动访问

除了 创建链接 之外，还可以通过 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

The 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 中不受支持。相反，请通过 post 进行请求，包括一个设置为 put 或 patch 的 _method 字段。这被称为 表单方法欺骗。

数据

您可以使用 data 选项向请求添加数据。

import { router } from '@inertiajs/vue3'

router.visit('/users', {
  method: 'post',
  data: {
    name: 'John Doe',
    email: '[email protected]',
  },
})

为了方便起见，get()、post()、put() 和 patch() 方法都接受 data 作为它们的第二个参数。

import { router } from '@inertiajs/vue3'

router.post('/users', {
  name: 'John Doe',
  email: '[email protected]',
})

自定义标头

The 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。

您可以通过将 preserveState 选项设置为 true 来指示 Inertia 在使用 get 方法时保留组件的状态。

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