Liên kết

Đâ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.

Để tạo liên kết đến các trang khác trong ứng dụng Inertia, thông thường bạn sẽ dùng component <a> của Inertia. Component này là lớp bọc nhẹ quanh liên kết anchor <a> tiêu chuẩn, chặn sự kiện click và ngăn tải lại toàn bộ trang. Đây là cách Inertia cung cấp trải nghiệm ứng dụng một trang sau khi ứng dụng đã được tải.

Tạo liên kết

Để tạo một liên kết Inertia, hãy dùng component <a> của Inertia. Mọi thuộc tính bạn truyền cho component này sẽ được chuyển tiếp đến thẻ HTML bên dưới.

import { Link } from '@inertiajs/vue2'

<Link href="/">Home</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/">Home</Link>

import { Link } from '@inertiajs/react'

<Link href="/">Home</Link>

import { inertia, Link } from '@inertiajs/svelte'

<a href="/" use:inertia>Home</a>

<Link href="/">Home</Link>

Mặc định, Inertia render liên kết dưới dạng phần tử anchor <a>. Tuy nhiên, bạn có thể thay đổi thẻ bằng prop as.

import { Link } from '@inertiajs/vue2'

<Link href="/logout" method="post" as="button" type="button">Logout</Link>

// Renders as...
<button type="button">Logout</button>

import { Link } from '@inertiajs/vue3'

<Link href="/logout" method="post" as="button" type="button">Logout</Link>

// Renders as...
<button type="button">Logout</button>

import { Link } from '@inertiajs/react'

<Link href="/logout" method="post" as="button" type="button">Logout</Link>

// Renders as...
<button type="button">Logout</button>

import { inertia } from '@inertiajs/svelte'

<button use:inertia="{{ href: '/logout', method: 'post' }}" type="button">Logout</button>

// Renders as...
<button type="button">Logout</button>

Không nên tạo liên kết anchor <a> dùng POST/PUT/PATCH/DELETE vì điều này gây vấn đề accessibility với chức năng “Mở liên kết trong tab / cửa sổ mới”. Thay vào đó, hãy cân nhắc sử dụng phần tử phù hợp hơn, chẳng hạn <button>.

Phương thức

Bạn có thể chỉ định HTTP method cho request của liên kết Inertia bằng prop method. Method mặc định của liên kết là GET, nhưng bạn có thể dùng prop method để thực hiện request POST, PUT, PATCH và DELETE thông qua liên kết.

import { Link } from '@inertiajs/vue2'

<Link href="/logout" method="post" as="button">Logout</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/logout" method="post" as="button">Logout</Link>

import { Link } from '@inertiajs/react'

<Link href="/logout" method="post" as="button">Logout</Link>

import { inertia, Link } from '@inertiajs/svelte'

<button use:inertia="{{ href: '/logout', method: 'post' }}" type="button">Logout</button>

Dữ liệu

Khi thực hiện request POST hoặc PUT, bạn có thể muốn gửi thêm dữ liệu trong request. Bạn có thể làm việc này bằng prop data. Dữ liệu được cung cấp có thể là một object hoặc instance FormData.

import { Link } from '@inertiajs/vue2'

<Link href="/endpoint" method="post" :data="{ foo: bar }">Save</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/endpoint" method="post" :data="{ foo: bar }">Save</Link>

import { Link } from '@inertiajs/react'

<Link href="/endpoint" method="post" data={{ foo: bar }}>Save</Link>

import { Link } from '@inertiajs/svelte'

<Link href="/endpoint" method="post" data={{ foo: bar }}>Save</Link>

Header tùy chỉnh

Prop headers cho phép thêm header tùy chỉnh vào liên kết Inertia. Tuy nhiên, các header Inertia sử dụng nội bộ để truyền trạng thái của nó đến máy chủ có độ ưu tiên cao hơn và vì vậy không thể bị ghi đè.

import { Link } from '@inertiajs/vue2'

<Link href="/endpoint" :headers="{ foo: bar }">Save</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/endpoint" :headers="{ foo: bar }">Save</Link>

import { Link } from '@inertiajs/react'

<Link href="/endpoint" headers={{ foo: bar }}>Save</Link>

import { inertia, Link } from '@inertiajs/svelte'

<button use:inertia="{{ href: '/endpoint', headers: { foo: bar } }}">Save</button>

<Link href="/endpoint" headers={{ foo: bar}}>Save</Link>

Lịch sử trình duyệt

Prop replace cho phép xác định hành vi lịch sử của trình duyệt. Mặc định, các lần truy cập trang sẽ push state mới (window.history.pushState) vào history; tuy nhiên, bạn cũng có thể thay thế state (window.history.replaceState) bằng cách đặt prop replace thành true. Khi đó, lần truy cập sẽ thay thế history state hiện tại thay vì thêm một state mới vào stack.

import { Link } from '@inertiajs/vue2'

<Link href="/" replace>Home</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/" replace>Home</Link>

import { Link } from '@inertiajs/react'

<a replace href="/">Home</a>

import { inertia, Link } from '@inertiajs/svelte'

<a href="/" use:inertia="{{ replace: true }}">Home</a>

<Link href="/" replace>Home</Link>

Giữ lại state

Bạn có thể giữ lại state cục bộ của page component bằng prop preserve-state. Điều này ngăn page component render lại hoàn toàn. Prop preserve-state đặc biệt hữu ích ở các trang chứa form vì bạn không cần tự điền lại các input và vẫn có thể duy trì input đang focus.

import { Link } from '@inertiajs/vue2'

<input v-model="query" type="text" />

<Link href="/search" :data="{ query }" preserve-state>Search</Link>

import { Link } from '@inertiajs/vue3'

<input v-model="query" type="text" />

<Link href="/search" :data="{ query }" preserve-state>Search</Link>

import { Link } from '@inertiajs/react'

<input onChange={this.handleChange} value={query} />

<Link href="/search" data={query} preserveState>Search</Link>

import { inertia, Link } from '@inertiajs/svelte'

<input on:change={handleChange} value={query} />

<button use:inertia="{{ href: '/search', data: query, preserveState: true }}">Search</button>

<Link href="/search" data={query} preserveState>Search</Link>

Giữ vị trí cuộn

Bạn có thể dùng prop preserveScroll để ngăn Inertia tự động đặt lại vị trí cuộn khi thực hiện một lần truy cập trang.

import { Link } from '@inertiajs/vue2'

<Link href="/" preserve-scroll>Home</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/" preserve-scroll>Home</Link>

import { Link } from '@inertiajs/react'

<a preserveScroll href="/">Home</a>

import { inertia, Link } from '@inertiajs/svelte'

<a href="/" use:inertia="{{ preserveScroll: true }}">Home</a>

<Link href="/" preserveScroll>Home</Link>

Để biết thêm thông tin về quản lý vị trí cuộn, hãy xem tài liệu quản lý cuộn.

Tải lại một phần

Prop only cho phép bạn chỉ định rằng chỉ một tập con props (dữ liệu) của trang cần được lấy từ máy chủ trong các lần truy cập tiếp theo đến trang đó.

import { Link } from '@inertiajs/vue2'

<Link href="/users?active=true" :only="['users']">Show active</Link>

import { Link } from '@inertiajs/vue3'

<Link href="/users?active=true" :only="['users']">Show active</Link>

import { Link } from '@inertiajs/react'

<Link href="/users?active=true" only={['users']}>Show active</Link>

import { inertia, Link } from '@inertiajs/svelte'

<a href="/users?active=true" use:inertia="{{ only: ['users'] }}">Show active</a>

<Link href="/users?active=true" only={['users']}>Show active</Link>

Để biết thêm về chủ đề này, hãy xem tài liệu đầy đủ về tải lại một phần.

Trạng thái active

Thông thường bạn sẽ muốn thiết lập trạng thái active cho các liên kết điều hướng dựa trên trang hiện tại. Với Inertia, bạn có thể thực hiện việc này bằng cách kiểm tra object page và so sánh chuỗi với các thuộc tính page.url và page.component.

import { Link } from '@inertiajs/vue2'

// URL exact match...
<Link href="/users" :class="{ 'active': $page.url === '/users' }">Users</Link>

// Component exact match...
<Link href="/users" :class="{ 'active': $page.component === 'Users/Index' }">Users</Link>

// URL starts with (/users, /users/create, /users/1, etc.)...
<Link href="/users" :class="{ 'active': $page.url.startsWith('/users') }">Users</Link>

// Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
<Link href="/users" :class="{ 'active': $page.component.startsWith('Users') }">Users</Link>

import { Link } from '@inertiajs/vue3'

// URL exact match...
<Link href="/users" :class="{ 'active': $page.url === '/users' }">Users</Link>

// Component exact match...
<Link href="/users" :class="{ 'active': $page.component === 'Users/Index' }">Users</Link>

// URL starts with (/users, /users/create, /users/1, etc.)...
<Link href="/users" :class="{ 'active': $page.url.startsWith('/users') }">Users</Link>

// Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
<Link href="/users" :class="{ 'active': $page.component.startsWith('Users') }">Users</Link>

import { usePage } from '@inertiajs/react'

const { url, component } = usePage()

// URL exact match...
<a href="/users" >Users</a>

// Component exact match...
<a href="/users" >Users</a>

// URL starts with (/users, /users/create, /users/1, etc.)...
<a href="/users" >Users</a>

// Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
<a href="/users" >Users</a>

import { page } from '@inertiajs/svelte'

// URL exact match...
<a href="/users" class={$page.url === '/users' ? 'active' : ''}>Users</a>

// Component exact match...
<a href="/users" class={$page.component === 'Users/Index' ? 'active' : ''}>Users</a>

// URL starts with (/users, /users/create, /users/1, etc.)...
<a href="/users" class={$page.url.startsWith('/users') ? 'active' : ''}>Users</a>

// Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
<a href="/users" class={$page.component.startsWith('Users') ? 'active' : ''}>Users</a>

Bạn có thể so sánh khớp chính xác (===), so sánh bằng startsWith() (hữu ích khi khớp một nhóm trang), hoặc thực hiện các phép so sánh phức tạp hơn bằng regular expression. Với cách tiếp cận này, bạn không bị giới hạn ở việc chỉ thiết lập class name. Bạn có thể dùng kỹ thuật này để render có điều kiện bất kỳ markup nào khi liên kết active, chẳng hạn nội dung liên kết khác hoặc thậm chí một icon SVG biểu thị liên kết đang active.

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

Tạo liên kết

Phương thức

Dữ liệu

Header tùy chỉnh

Lịch sử trình duyệt

Giữ lại state

Giữ vị trí cuộn

Tải lại một phần

Trạng thái active

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

​Tạo liên kết

​Phương thức

​Dữ liệu

​Header tùy chỉnh

​Lịch sử trình duyệt

​Giữ lại state

​Giữ vị trí cuộn

​Tải lại một phần

​Trạng thái active

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

Tạo liên kết

Phương thức

Dữ liệu

Header tùy chỉnh

Lịch sử trình duyệt

Giữ lại state

Giữ vị trí cuộn

Tải lại một phần

Trạng thái active

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