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

Để tạo link tới page khác trong ứng dụng Inertia, thông thường bạn dùng component `<Link>` của Inertia. Component này là lớp wrapper nhẹ quanh anchor link `<a>` tiêu chuẩn, intercept click event và ngăn full-page reload. Đây là [cách Inertia mang lại trải nghiệm single-page app](/v3/core-concepts/how-it-works) sau khi ứng dụng đã được tải.

## Tạo liên kết

Để tạo liên kết Inertia, hãy dùng component `<Link>`. Mọi attribute truyền vào component sẽ được proxy xuống thẻ HTML bên dưới.

<CodeGroup>
  ```vue Vue 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 icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue3'

  <Link href="/logout" method="post" as="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">Logout</Link>

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

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

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

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

<Info>
  Không khuyến khích tạo anchor link (`<a>`) gửi request `POST`, `PUT`, `PATCH` hoặc `DELETE` vì gây vấn đề accessibility với thao tác "Open Link in New Tab / Window". Component tự động render phần tử `<button>` khi dùng các method này.
</Info>

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

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

## Wayfinder

Khi dùng [Wayfinder](https://github.com/laravel/wayfinder) cùng component `Link`, bạn có thể truyền trực tiếp object kết quả vào prop `href`. `Link` sẽ suy ra HTTP method và URL trực tiếp từ Wayfinder object.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  import { Link } from '@inertiajs/vue3' import { show } from
  'App/Http/Controllers/UserController'

  <Link :href="show(1)">John Doe</Link>
  ```

  ```jsx React icon="react" theme={null}
  import { Link } from "@inertiajs/react";
  import { show } from "App/Http/Controllers/UserController";

  <Link href={show(1)}>John Doe</Link>;
  ```

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

  <button use:inertia={{ href: show(1) }} type="button">John Doe</button>

  <Link href={show(1)}>John Doe</Link>
  ```
</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 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 { inertia, Link } from '@inertiajs/svelte'

  <button use:inertia={{ href: '/endpoint', method: 'post', data: { foo: bar } }} type="button">Save</button>

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

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

  ```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 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} type="text" />

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

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

  <input bind:value={query} type="text" />

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

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

  ```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 về quản lý vị trí cuộn, xem tài liệu [scroll management](/v3/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 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, xem tài liệu đầy đủ về [partial reloads](/v3/data-props/partial-reloads).

## View Transition

Bạn có thể bật [View transitions](/v3/the-basics/view-transitions) cho link bằng cách đặt prop `viewTransition` thành `true`. Cơ chế này dùng View Transitions API của trình duyệt để animate quá trình chuyển trang.

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

  <Link href="/another-page" view-transition>Navigate</Link>
  ```

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

  <Link href="/another-page" viewTransition>
    Navigate
  </Link>;
  ```

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

  <Link href="/another-page" viewTransition>Navigate</Link>
  ```
</CodeGroup>

## Trạng thái active

Việc thiết lập trạng thái active cho liên kết điều hướng dựa trên trang hiện tại là rất phổ biến. Với Inertia, bạn có thể làm điều này bằng cách kiểm tra object `page` và so sánh chuỗi với các property `page.url` và `page.component`.

<CodeGroup>
  ```vue Vue 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...
  <Link href="/users" className={url === '/users' ? 'active' : ''}>Users</Link>

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

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

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

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

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

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

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

  // Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
  <Link href="/users" class={page.component.startsWith('Users') ? 'active' : ''}>Users</Link>
  ```
</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ỉ đặt 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 theo active state, chẳng hạn text link khác hoặc SVG icon cho biết link đang active.

## Thuộc tính loading của dữ liệu

Trong khi liên kết đang thực hiện request, attribute `data-loading` được thêm vào element liên kết. Điều này cho phép bạn style liên kết trong trạng thái loading. Attribute được gỡ khi request hoàn tất.

***

## 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](https://inertiajs.com/docs/v3/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.