事件

Inertia 提供了一个事件系统，允许您“挂钩”到库的各种生命周期事件。

注册监听器

要注册事件监听器，请使用 router.on() 方法。

import { router } from '@inertiajs/vue3'

router.on('start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
})

在幕后，Inertia 使用原生浏览器事件，因此您也可以使用您可能已经熟悉的典型事件方法与 Inertia 事件进行交互 - 只需确保在事件名称前加上 inertia:。

import { router } from '@inertiajs/vue3'

document.addEventListener('inertia:start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
})

删除监听器

当您注册事件监听器时，Inertia 会自动返回一个回调，该回调可以被调用以删除事件监听器。

import { router } from '@inertiajs/vue3'

let removeStartEventListener = router.on('start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
})

// Remove the listener...
removeStartEventListener()

结合钩子，您可以在组件卸载时自动删除事件监听器。

import { router } from '@inertiajs/vue3'
import { onUnmounted } from 'vue'

onUnmounted(
  router.on('start', (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
  })
)

或者，如果您使用的是原生浏览器事件，则可以使用 removeEventListener() 删除事件监听器。

import { router } from '@inertiajs/vue3'

let startEventListener = (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
}

document.addEventListener('inertia:start', startEventListener)

// Remove the listener...
document.removeEventListener('inertia:start', startEventListener)

取消事件

某些事件，例如 before、invalid 和 error，支持取消，允许您阻止 Inertia 的默认行为。就像原生事件一样，如果只有一个事件监听器调用 event.preventDefault()，则事件将被取消。

import { router } from '@inertiajs/vue3'

router.on('before', (event) => {
  if (!confirm('Are you sure you want to navigate away?')) {
    event.preventDefault()
  }
})

为了方便起见，如果您使用 router.on() 注册事件监听器，则可以通过从监听器返回 false 来取消事件。

import { router } from '@inertiajs/vue3'

router.on('before', (event) => {
  return confirm('Are you sure you want to navigate away?')
})

请注意，浏览器不允许取消原生 popstate 事件，因此在使用 Inertia.js 时无法阻止前进和后退历史访问。

之前

当要向服务器发出请求时，before 事件会触发。这对于拦截访问很有用。

import { router } from '@inertiajs/vue3'

router.on('before', (event) => {
  console.log(`About to make a visit to ${event.detail.visit.url}`)
})

此事件的主要目的是允许您阻止访问发生。

import { router } from '@inertiajs/vue3'

router.on('before', (event) => {
  return confirm('Are you sure you want to navigate away?')
})

开始

当向服务器的请求开始时，start 事件会触发。这对于显示加载指示器很有用。

import { router } from '@inertiajs/vue3'

router.on('start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
})

start 事件不可取消。

进度

在文件上传期间，随着进度增加，progress 事件会触发。

import { router } from '@inertiajs/vue3'

router.on('progress', (event) => {
  this.form.progress = event.detail.progress.percentage
})

progress 事件不可取消。

成功

在页面访问成功时，success 事件会触发，除非存在验证错误。但是，这并不包括历史访问。

import { router } from '@inertiajs/vue3'

router.on('success', (event) => {
  console.log(`Successfully made a visit to ${event.detail.page.url}`)
})

success 事件不可取消。

错误

当“成功”页面访问中存在验证错误时，error 事件会触发。

import { router } from '@inertiajs/vue3'

router.on('error', (errors) => {
  console.log(errors)
})

error 事件不可取消。

无效

当从服务器接收到非 Inertia 响应时，例如 HTML 或普通 JSON 响应，invalid 事件会触发。有效的 Inertia 响应是响应 X-Inertia 标头设置为 true，并且具有包含 页面对象 的 json 负载。

此事件针对所有响应类型触发，包括 200、400 和 500 响应代码。

import { router } from '@inertiajs/vue3'

router.on('invalid', (event) => {
  console.log(`An invalid Inertia response was received.`)
  console.log(event.detail.response)
})

您可以取消 invalid 事件以阻止 Inertia 显示非 Inertia 响应模态。

import { router } from '@inertiajs/vue3'

router.on('invalid', (event) => {
  event.preventDefault()

  // Handle the invalid response yourself...
})

异常

在意外的 XHR 错误（例如网络中断）时，exception 事件会触发。此外，此事件针对在解析页面组件时生成的错误触发。

import { router } from '@inertiajs/vue3'

router.on('exception', (event) => {
  console.log(`An unexpected error occurred during an Inertia visit.`)
  console.log(event.detail.error)
})

您可以取消 exception 事件以阻止错误被抛出。

import { router } from '@inertiajs/vue3'

router.on('exception', (event) => {
  event.preventDefault()
  // Handle the error yourself
})

此事件不会针对接收 400 和 500 级响应的 XHR 请求或非 Inertia 响应触发，因为这些情况由 Inertia 以其他方式处理。有关更多信息，请参阅 错误处理文档。

完成

在 XHR 请求针对“成功”和“不成功”响应完成之后，finish 事件会触发。此事件对于隐藏加载指示器很有用。

import { router } from '@inertiajs/vue3'

router.on('finish', (event) => {
  NProgress.done()
})

finish 事件不可取消。

导航

在页面访问成功时以及浏览历史记录时，navigate 事件会触发。

import { router } from '@inertiajs/vue3'

router.on('navigate', (event) => {
  console.log(`Navigated to ${event.detail.page.url}`)
})

navigate 事件不可取消。

事件回调

除了本页中描述的全局事件之外，Inertia 还提供了一些 事件回调，这些回调在手动进行 Inertia 访问时触发。