Trang

Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem hướng dẫn nâng cấp để bắt đầu.

Khi xây dựng ứng dụng bằng Inertia, mỗi trang trong ứng dụng thường có controller / route riêng cùng một component JavaScript tương ứng. Nhờ đó, bạn chỉ cần truy xuất dữ liệu cần thiết cho trang đó — 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'

    export let user
</script>

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

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

Tạo layout

Mặc dù không bắt buộc, với phần lớn dự án, việc tạo layout component dùng chung cho mọi trang là hợp lý. Bạn có thể nhận thấy trong ví dụ trên nội dung trang được bọc bằng component <Layout>. Sau đây là ví dụ về component như vậy:

<script setup>
import { Link } from '@inertiajs/vue3'
</script>

<template>
    <main>
        <header>
            <Link href="/">Home</Link>
            <Link href="/about">About</Link>
            <Link href="/contact">Contact</Link>
        </header>
        <article>
            <slot />
        </article>
    </main>
</template>

import { Link } from '@inertiajs/react'

export default function Layout({ children }) {
    return (
        <main>
            <header>
                <Link href="/">Home</Link>
                <Link href="/about">About</Link>
                <Link href="/contact">Contact</Link>
            </header>
            <article>{children}</article>
        </main>
    )
}

<script>
    import { inertia } from '@inertiajs/svelte'
</script>

<main>
    <header>
        <a use:inertia href="/">Home</a>
        <a use:inertia href="/about">About</a>
        <a use:inertia href="/contact">Contact</a>
    </header>
    <article>
        <slot />
    </article>
</main>

<script>
    import { inertia } from '@inertiajs/svelte'

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

<main>
    <header>
        <a use:inertia href="/">Home</a>
        <a use:inertia href="/about">About</a>
        <a use:inertia href="/contact">Contact</a>
    </header>
    <article>
        {@render children()}
    </article>
</main>

Layout duy trì xuyên suốt

Mặc dù triển khai layout dưới dạng phần tử con của page component rất đơn giản, cách này khiến instance của layout bị hủy và tạo lại giữa các lần chuyển trang. Điều đó có nghĩa là bạn không thể duy trì state của layout khi điều hướng giữa các trang. Ví dụ, có thể website podcast của bạn có một trình phát âm thanh mà bạn muốn tiếp tục phát khi người dùng điều hướng trong website. Hoặc đơn giản bạn muốn giữ vị trí cuộn của thanh điều hướng sidebar giữa các lần chuyển trang. Trong những trường hợp này, giải pháp là sử dụng persistent layout của Inertia.

<script>
import Layout from './Layout'

export default {
    // Using a render function...
    layout: (h, page) => h(Layout, [page]),

    // Using shorthand syntax...
    layout: Layout,
}
</script>

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

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

import Layout from './Layout'

const Home = ({ user }) => {
    return (

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

    )
}

Home.layout = page => <Layout children={page} title="Welcome" />

export default Home

<script context="module">
    export { default as layout } from './Layout.svelte'
</script>

<script>
    export let user
</script>

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

<script module>
    export { default as layout } from './Layout.svelte'
</script>

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

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

Bạn cũng có thể tạo các cách bố trí layout phức tạp hơn bằng nested layout.

<script>
import SiteLayout from './SiteLayout'
import NestedLayout from './NestedLayout'

export default {
    // Using a render function...
    layout: (h, page) => {
        return h(SiteLayout, () => h(NestedLayout, () => page))
    },

    // Using the shorthand...
    layout: [SiteLayout, NestedLayout],
}
</script>

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

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

import SiteLayout from './SiteLayout'
import NestedLayout from './NestedLayout'

const Home = ({ user }) => {
    return (

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

    )
}

Home.layout = page => (
    <SiteLayout title="Welcome">
        <NestedLayout children={page} />
    </SiteLayout>
)

export default Home

<script context="module">
    import SiteLayout from './SiteLayout.svelte'
    import NestedLayout from './NestedLayout.svelte'

    // Using a render function...
    export const layout = (h, page) => {
        return h(SiteLayout, [h(NestedLayout, [page])])
    }

    // Using the shorthand...
    export const layout = [SiteLayout, NestedLayout]
</script>

<script>
    export let user
</script>

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

<script module>
    import SiteLayout from './SiteLayout.svelte'
    import NestedLayout from './NestedLayout.svelte'

    // Using a render function...
    export const layout = (h, page) => {
        return h(SiteLayout, [h(NestedLayout, [page])])
    }

    // Using the shorthand...
    export const layout = [SiteLayout, NestedLayout]
</script>

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

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

Layout mặc định

Nếu sử dụng persistent layout, bạn có thể thấy thuận tiện khi định nghĩa layout mặc định của trang trong callback resolve() ở file JavaScript chính của ứng dụng.

import Layout from './Layout'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        let page = pages[`./Pages/${name}.vue`]
        page.default.layout = page.default.layout || Layout
        return page
    },
    // ...
})

import Layout from './Layout'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
        let page = pages[`./Pages/${name}.jsx`]
        page.default.layout = page.default.layout || (page => <Layout children={page} />)
        return page
    },
    // ...
})

import Layout from './Layout'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
        let page = pages[`./Pages/${name}.svelte`]
        return { default: page.default, layout: page.layout || Layout }
    },
    // ...
})

Cách này sẽ tự động đặt layout của trang thành Layout nếu trang đó chưa được thiết lập layout. Bạn thậm chí có thể đi xa hơn bằng cách thiết lập layout mặc định có điều kiện dựa trên name của trang, vốn có sẵn trong callback resolve(). Ví dụ, bạn có thể không muốn áp dụng layout mặc định cho các trang công khai.

import Layout from './Layout'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        let page = pages[`./Pages/${name}.vue`]
        page.default.layout = name.startsWith('Public/') ? undefined : Layout
        return page
    },
    // ...
})

import Layout from './Layout'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
        let page = pages[`./Pages/${name}.jsx`]
        page.default.layout = name.startsWith('Public/') ? undefined : page => <Layout children={page} />
        return page
    },
    // ...
})

import Layout from './Layout'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
        let page = pages[`./Pages/${name}.svelte`]
        return { default: page.default, layout: name.startsWith('Public/') ? undefined : Layout }
    },
    // ...
})

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

Tạo layout

Layout duy trì xuyên suốt

Layout mặc định

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

​Tạo trang

​Tạo layout

​Layout duy trì xuyên suốt

​Layout mặc định

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

Tạo trang

Tạo layout

Layout duy trì xuyên suốt

Layout mặc định

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