Trang

Khi xây ứng dụng với Inertia, mỗi page thường có controller hoặc route riêng và JavaScript component tương ứng. Điều này cho phép chỉ lấy dữ liệu cần thiết cho page đó - không cần API. Ngoài ra, toàn bộ dữ liệu mà trang cần có thể được truy xuất trước khi trình duyệt render trang, qua đó loại bỏ nhu cầu hiển thị trạng thái “đang tải” khi người dùng truy cập ứng dụng.

Tạo trang

Trang Inertia đơn giản chỉ là các component JavaScript. Nếu từng viết component Vue, React hoặc Svelte, bạn sẽ thấy rất quen thuộc. Như ví dụ bên dưới, các trang nhận dữ liệu từ controller của ứng dụng thông qua props.

<script setup>
import Layout from "./Layout";
import { Head } from "@inertiajs/vue3";

defineProps({ user: Object });
</script>

<template>
  <Layout>
    <Head title="Welcome" />
    <h1>Welcome</h1>
    <p>Hello {{ user.name }}, welcome to your first Inertia app!</p>
  </Layout>
</template>

import Layout from "./Layout";
import { Head } from "@inertiajs/react";

export default function Welcome({ user }) {
  return (
    <Layout>
      <Head title="Welcome" />
      <h1>Welcome</h1>
      <p>Hello {user.name}, welcome to your first Inertia app!</p>
    </Layout>
  );
}

<script>
    import Layout from './Layout.svelte'

    let { user } = $props()
</script>

<svelte:head>
    <title>Welcome</title>
</svelte:head>

<Layout>
    <h1>Welcome</h1>
    <p>Hello {user.name}, welcome to your first Inertia app!</p>
</Layout>

use Inertia\Inertia;

class UserController extends Controller
{
    public function show(User $user)
    {
        return Inertia::render('User/Show', [
            'user' => $user
        ]);
    }
}

Nếu cố render một trang không tồn tại, response thường là màn hình trống. Để ngăn điều này, bạn có thể đặt config inertia.ensure_pages_exist thành true. Adapter Laravel khi đó sẽ ném Inertia\ComponentNotFoundException nếu không tìm thấy trang.

Biến đổi tên component

Đôi khi bạn muốn biến đổi tên component. Có thể làm phía client bằng tùy chọn pages.transform, hoặc phía server bằng phương thức Inertia::transformComponentUsing(). Tên sau biến đổi được gửi tới trình duyệt và dùng cho kiểm tra ensure_pages_exist.

use Inertia\Inertia;

Inertia::transformComponentUsing(function (string $name): string {
    return "{$name}/Page";
});

Layouts

Hầu hết ứng dụng chia sẻ các phần tử UI chung giữa các page. Inertia cung cấp persistent layout tồn tại qua page navigation, cùng layout prop để truyền dữ liệu động giữa page và layout. Xem tài liệu layouts để biết thêm.

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

Tạo trang

Biến đổi tên component

Layouts

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

​Tạo trang

​Biến đổi tên component

​Layouts

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

Tạo trang

Biến đổi tên component

Layouts

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