Sự kiện

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/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 dùng native browser event, nên bạn cũng có thể tương tác với Inertia event bằng các event method quen thuộc. Chỉ cần nhớ thêm tiền tố inertia: vào event name.

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/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.

<script setup>
import { router } from '@inertiajs/vue3'
import { onUnmounted } from 'vue'

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

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";

$effect(() => {
  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/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);

Listener chỉ chạy một lần

Bạn có thể đăng ký listener chỉ chạy một lần bằng phương thức router.once(). Listener tự động bị xóa sau lần gọi đầu tiên.

import { router } from "@inertiajs/vue3";

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

import { router } from "@inertiajs/react";

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

import { router } from "@inertiajs/svelte";

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

Giống router.on(), phương thức này trả callback mà bạn có thể gọi để xóa listener trước khi nó chạy.

import { router } from "@inertiajs/vue3";

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

// Remove the listener before it fires...
removeStartEventListener();

import { router } from "@inertiajs/react";

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

// Remove the listener before it fires...
removeStartEventListener();

import { router } from "@inertiajs/svelte";

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

// Remove the listener before it fires...
removeStartEventListener();

Hủy event

Một số event như before, networkError, httpException và location hỗ trợ hủy, cho phép ngăn hành vi mặc định của Inertia. Giống native event, event sẽ bị hủy nếu chỉ cần một listener gọi 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/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 ý browser không cho phép hủy native event popstate, vì vậy không thể ngăn history visit forward/back bằng Inertia.

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/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/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/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/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

Event success chạy khi page visit thành công, trừ khi có validation error. Tuy nhiên, điều này không bao gồm history visit.

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.

Flash

Event flash chạy khi nhận flash data từ server. Điều này hữu ích để hiển thị toast hoặc xử lý dữ liệu tạm thời tại một vị trí tập trung.

import { router } from "@inertiajs/vue3";

router.on("flash", (event) => {
  if (event.detail.flash.toast) {
    showToast(event.detail.flash.toast);
  }
});

import { router } from "@inertiajs/react";

router.on("flash", (event) => {
  if (event.detail.flash.toast) {
    showToast(event.detail.flash.toast);
  }
});

import { router } from "@inertiajs/svelte";

router.on("flash", (event) => {
  if (event.detail.flash.toast) {
    showToast(event.detail.flash.toast);
  }
});

Event flash không thể bị hủy và được phát trên mọi response có chứa flash data.

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/vue3";

router.on("error", (event) => {
  console.log(event.detail.errors);
});

import { router } from "@inertiajs/react";

router.on("error", (event) => {
  console.log(event.detail.errors);
});

import { router } from "@inertiajs/svelte";

router.on("error", (event) => {
  console.log(event.detail.errors);
});

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

HTTP Exception

Event httpException chạy khi nhận response không phải Inertia từ server, chẳng hạn HTML hoặc JSON response. Inertia response hợp lệ có header X-Inertia đặt thành true và JSON payload chứa page object. Event này chạy cho mọi loại response, bao gồm code 200, 400 và 500.

import { router } from "@inertiajs/vue3";

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

import { router } from "@inertiajs/react";

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

import { router } from "@inertiajs/svelte";

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

Bạn có thể hủy event httpException để ngăn Inertia hiển thị modal response không phải Inertia.

import { router } from "@inertiajs/vue3";

router.on("httpException", (event) => {
  event.preventDefault();

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

import { router } from "@inertiajs/react";

router.on("httpException", (event) => {
  event.preventDefault();

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

import { router } from "@inertiajs/svelte";

router.on("httpException", (event) => {
  event.preventDefault();

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

Network Error

Event networkError chạy khi xảy ra XHR error ngoài dự kiến như mất kết nối mạng. Ngoài ra event cũng chạy với error phát sinh khi resolve page component.

import { router } from "@inertiajs/vue3";

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

import { router } from "@inertiajs/react";

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

import { router } from "@inertiajs/svelte";

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

Bạn có thể hủy event networkError để ngăn exception bị ném.

import { router } from "@inertiajs/vue3";

router.on("networkError", (event) => {
  event.preventDefault();
  // Handle the error yourself
});

import { router } from "@inertiajs/react";

router.on("networkError", (event) => {
  event.preventDefault();
  // Handle the error yourself
});

import { router } from "@inertiajs/svelte";

router.on("networkError", (event) => {
  event.preventDefault();
  // Handle the error yourself
});

Event này không chạy với XHR request nhận response mức 400 và 500 hoặc response không phải Inertia, vì các tình huống đó được Inertia xử lý theo cách khác. Xem tài liệu xử lý lỗi để biết thêm.

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/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/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.

Location

v3.6.0+ Event location chạy mỗi khi Inertia chuẩn bị ép full-page navigation, do asset version thay đổi hoặc server trả redirect Inertia::location(). Event detail chứa boolean versionChange để phân biệt automatic asset version change với manual redirect.

import { router } from "@inertiajs/vue3";

router.on("location", (event) => {
  console.log(`Navigating to ${event.detail.url}`);
  console.log(`Triggered by a version change: ${event.detail.versionChange}`);
});

import { router } from "@inertiajs/react";

router.on("location", (event) => {
  console.log(`Navigating to ${event.detail.url}`);
  console.log(`Triggered by a version change: ${event.detail.versionChange}`);
});

import { router } from "@inertiajs/svelte";

router.on("location", (event) => {
  console.log(`Navigating to ${event.detail.url}`);
  console.log(`Triggered by a version change: ${event.detail.versionChange}`);
});

Bạn có thể hủy event location để tự tiếp quản navigation, ví dụ hiển thị banner “có phiên bản mới” thay vì reload.

import { router } from "@inertiajs/vue3";

router.on("location", (event) => {
  if (event.detail.versionChange) {
    event.preventDefault();
    showBanner("A new version is available.");
  }
});

import { router } from "@inertiajs/react";

router.on("location", (event) => {
  if (event.detail.versionChange) {
    event.preventDefault();
    showBanner("A new version is available.");
  }
});

import { router } from "@inertiajs/svelte";

router.on("location", (event) => {
  if (event.detail.versionChange) {
    event.preventDefault();
    showBanner("A new version is available.");
  }
});

Prefetch

Event prefetching được kích hoạt khi router bắt đầu prefetch một trang.

import { router } from "@inertiajs/vue3";

router.on("prefetching", (event) => {
  console.log(`Prefetching ${event.detail.visit.url}`);
});

import { router } from "@inertiajs/react";

router.on("prefetching", (event) => {
  console.log(`Prefetching ${event.detail.visit.url}`);
});

import { router } from "@inertiajs/svelte";

router.on("prefetching", (event) => {
  console.log(`Prefetching ${event.detail.visit.url}`);
});

Event prefetching không thể hủy.

Prefetched

Event prefetched được kích hoạt khi router đã prefetch một trang thành công.

import { router } from "@inertiajs/vue3";

router.on("prefetched", (event) => {
  console.log(`Prefetched ${event.detail.visit.url}`);
});

import { router } from "@inertiajs/react";

router.on("prefetched", (event) => {
  console.log(`Prefetched ${event.detail.visit.url}`);
});

import { router } from "@inertiajs/svelte";

router.on("prefetched", (event) => {
  console.log(`Prefetched ${event.detail.visit.url}`);
});

Event prefetched không thể hủy.

Callback sự kiện

Ngoài các global event được mô tả trong trang này, Inertia còn cung cấp nhiều event callback chạy khi bạn thực hiện Inertia visit thủ công.

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 v3 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

Dữ liệu & Props

Bảo mật

Nâng cao

Đăng ký listener

Gỡ listener

Listener chỉ chạy một lần

Hủy event

Before

Start

Progress

Success

Flash

Error

HTTP Exception

Network Error

Finish

Navigate

Location

Prefetch

Prefetched

Callback sự kiện

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

​Đăng ký listener

​Gỡ listener

​Listener chỉ chạy một lần

​Hủy event

​Before

​Start

​Progress

​Success

​Flash

​Error

​HTTP Exception

​Network Error

​Finish

​Navigate

​Location

​Prefetch

​Prefetched

​Callback sự kiện

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

Đăng ký listener

Gỡ listener

Listener chỉ chạy một lần

Hủy event

Before

Start

Progress

Success

Flash

Error

HTTP Exception

Network Error

Finish

Navigate

Location

Prefetch

Prefetched

Callback sự kiện

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