Sự kiện

Đây là tài liệu Inertia.js v1, phiên bản không còn được duy trì tích cực. Vui lòng tham khảo tài liệu v3.

Inertia cung cấp một hệ thống sự kiện cho phép bạn “hook” vào nhiều sự kiện khác nhau trong lifecycle của thư viện.

Đăng ký listener

Để đăng ký event listener, dùng phương thức router.on().

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Bên dưới, Inertia sử dụng event nguyên bản của trình duyệt nên bạn cũng có thể tương tác với sự kiện Inertia bằng các phương thức event thông thường mà bạn đã quen dùng — chỉ cần nhớ thêm tiền tố inertia: vào tên sự kiện.

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Gỡ listener

Khi bạn đăng ký event listener, Inertia tự động trả về một callback có thể gọi để gỡ listener đó.

import { router } from '@inertiajs/vue2'

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'

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

// Remove the listener...
removeStartEventListener()

import { router } from '@inertiajs/react'

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

// Remove the listener...
removeStartEventListener()

import { router } from '@inertiajs/svelte'

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

// Remove the listener...
removeStartEventListener()

Kết hợp với hook, bạn có thể tự động gỡ event listener khi component unmount.

import { router } from '@inertiajs/vue2'

export default {
    mounted() {
        this.$once(
            'hook:destroyed',
            router.on('start', (event) => {
                console.log(`Starting a visit to ${event.detail.visit.url}`)
            })
        )
    },
}

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

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

import { useEffect } from 'react'
import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'
import { onMount } from 'svelte'

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

Ngoài ra, nếu đang dùng event nguyên bản của trình duyệt, bạn có thể gỡ listener bằng removeEventListener().

import { router } from '@inertiajs/vue2'

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)

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)

import { router } from '@inertiajs/react'

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)

import { router } from '@inertiajs/svelte'

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)

Hủy sự kiện

Một số sự kiện như before, invalid và error hỗ trợ việc hủy, cho phép bạn ngăn hành vi mặc định của Inertia. Tương tự event nguyên bản, event sẽ bị hủy nếu chỉ một event listener gọi event.preventDefault().

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Để thuận tiện, nếu đăng ký event listener bằng router.on(), bạn có thể hủy event bằng cách trả về false từ listener.

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Lưu ý, trình duyệt không cho phép hủy event nguyên bản popstate, vì vậy không thể ngăn các lần điều hướng tiến và lùi trong lịch sử khi sử dụng Inertia.js.

Before

Sự kiện before được phát ngay trước khi một request chuẩn bị được gửi đến máy chủ. Điều này hữu ích để chặn visit.

import { router } from '@inertiajs/vue2'

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) => {
    console.log(`About to make a visit to ${event.detail.visit.url}`)
})

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Mục đích chính của sự kiện này là cho phép bạn ngăn một visit diễn ra.

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Start

Sự kiện start được phát khi request đến máy chủ đã bắt đầu. Sự kiện này hữu ích để hiển thị loading indicator.

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Sự kiện start không thể bị hủy.

Progress

Sự kiện progress được phát khi tiến trình tăng lên trong quá trình tải file.

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Sự kiện progress không thể bị hủy.

Success

Sự kiện success được phát khi page visit thành công, trừ khi có lỗi validation. Tuy nhiên, điều này không bao gồm các visit trong lịch sử trình duyệt.

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Sự kiện success không thể bị hủy.

Error

Sự kiện error được phát khi có lỗi validation trong các page visit “thành công”.

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Sự kiện error không thể bị hủy.

Invalid

Sự kiện invalid được phát khi máy chủ trả về response không phải Inertia, chẳng hạn response HTML hoặc JSON thông thường. Một response Inertia hợp lệ là response có header X-Inertia được đặt thành true cùng payload json chứa page object. Sự kiện này được phát với mọi loại response, bao gồm các mã response 200, 400 và 500.

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Bạn có thể hủy sự kiện invalid để ngăn Inertia hiển thị modal chứa response không phải Inertia.

import { router } from '@inertiajs/vue2'

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

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

import { router } from '@inertiajs/vue3'

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

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

import { router } from '@inertiajs/react'

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

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

import { router } from '@inertiajs/svelte'

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

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

Exception

Sự kiện exception được phát khi xảy ra lỗi XHR ngoài dự kiến như gián đoạn mạng. Ngoài ra, sự kiện này cũng được phát với các lỗi xảy ra trong quá trình resolve page component.

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Bạn có thể hủy sự kiện exception để ngăn lỗi bị ném ra.

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Sự kiện này không được phát với request XHR nhận response mức 400 hoặc 500, cũng không áp dụng cho response không phải Inertia, vì Inertia xử lý các tình huống này theo cơ chế khác. Hãy xem tài liệu xử lý lỗi để biết thêm thông tin.

Finish

Sự kiện finish được phát sau khi một request XHR hoàn tất, áp dụng cho cả response “thành công” lẫn “không thành công”. Sự kiện này hữu ích để ẩn loading indicator.

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Sự kiện finish không thể bị hủy.

Navigate

Sự kiện navigate được phát khi page visit thành công, cũng như khi điều hướng qua lịch sử trình duyệt.

import { router } from '@inertiajs/vue2'

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

import { router } from '@inertiajs/svelte'

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

Sự kiện navigate không thể bị hủy.

Callback sự kiện

Ngoài các sự kiện toàn cục được mô tả trong trang này, Inertia còn cung cấp một số event callback được kích hoạt khi bạn chủ động thực hiện Inertia visit.

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v1 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Nâng cao

Đăng ký listener

Gỡ listener

Hủy sự kiện

Before

Start

Progress

Success

Error

Invalid

Exception

Finish

Navigate

Callback sự kiện

Tài liệu chính thức

​Đăng ký listener

​Gỡ listener

​Hủy sự kiện

​Before

​Start

​Progress

​Success

​Error

​Invalid

​Exception

​Finish

​Navigate

​Callback sự kiện

​Tài liệu chính thức

Đăng ký listener

Gỡ listener

Hủy sự kiện

Before

Start

Progress

Success

Error

Invalid

Exception

Finish

Navigate

Callback sự kiện

Tài liệu chính thức