> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs-vi.tuantq.online/llms.txt
> Use this file to discover all available pages before exploring further.

# Liên kết

<Warning>Đâ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](/v3/getting-started/index).</Warning>

Để 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](/v1/core-concepts/how-it-works) 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.

<CodeGroup>
  ```vue Vue 2 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue2'

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

  ```vue Vue 3 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue3'

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

  ```jsx React icon="react" theme={null}
  import { Link } from '@inertiajs/react'

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

  ```svelte Svelte icon="s" theme={null}
  import { inertia, Link } from '@inertiajs/svelte'

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

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

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

<CodeGroup>
  ```vue Vue 2 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue2'

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

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

  ```vue Vue 3 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue3'

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

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

  ```jsx React icon="react" theme={null}
  import { Link } from '@inertiajs/react'

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

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

  ```svelte Svelte icon="s" theme={null}
  import { inertia } from '@inertiajs/svelte'

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

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

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.

<CodeGroup>
  ```vue Vue 2 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue2'

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

  ```vue Vue 3 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue3'

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

  ```jsx React icon="react" theme={null}
  import { Link } from '@inertiajs/react'

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

  ```svelte Svelte icon="s" theme={null}
  import { inertia, Link } from '@inertiajs/svelte'

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

## 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`.

<CodeGroup>
  ```vue Vue 2 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue2'

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

  ```vue Vue 3 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue3'

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

  ```jsx React icon="react" theme={null}
  import { Link } from '@inertiajs/react'

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

  ```svelte Svelte icon="s" theme={null}
  import { Link } from '@inertiajs/svelte'

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

## 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 đè.

<CodeGroup>
  ```vue Vue 2 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue2'

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

  ```vue Vue 3 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue3'

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

  ```jsx React icon="react" theme={null}
  import { Link } from '@inertiajs/react'

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

  ```svelte Svelte icon="s" theme={null}
  import { inertia, Link } from '@inertiajs/svelte'

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

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

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

<CodeGroup>
  ```vue Vue 2 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue2'

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

  ```vue Vue 3 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue3'

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

  ```jsx React icon="react" theme={null}
  import { Link } from '@inertiajs/react'

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

  ```svelte Svelte icon="s" theme={null}
  import { inertia, Link } from '@inertiajs/svelte'

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

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

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

<CodeGroup>
  ```vue Vue 2 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue2'

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

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

  ```vue Vue 3 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue3'

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

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

  ```jsx React icon="react" theme={null}
  import { Link } from '@inertiajs/react'

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

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

  ```svelte Svelte icon="s" theme={null}
  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>
  ```
</CodeGroup>

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

<CodeGroup>
  ```vue Vue 2 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue2'

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

  ```vue Vue 3 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue3'

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

  ```jsx React icon="react" theme={null}
  import { Link } from '@inertiajs/react'

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

  ```svelte Svelte icon="s" theme={null}
  import { inertia, Link } from '@inertiajs/svelte'

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

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

Để 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](/v1/advanced/scroll-management).

## 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 đó.

<CodeGroup>
  ```vue Vue 2 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue2'

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

  ```vue Vue 3 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue3'

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

  ```jsx React icon="react" theme={null}
  import { Link } from '@inertiajs/react'

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

  ```svelte Svelte icon="s" theme={null}
  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>
  ```
</CodeGroup>

Để 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](/v1/advanced/partial-reloads).

## 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`.

<CodeGroup>
  ```vue Vue 2 icon="vuejs" theme={null}
  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>
  ```

  ```vue Vue 3 icon="vuejs" theme={null}
  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>
  ```

  ```jsx React icon="react" theme={null}
  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>
  ```

  ```svelte Svelte icon="s" theme={null}
  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>
  ```
</CodeGroup>

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](https://inertiajs.com/docs/v1/the-basics/links). 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.