Чим компонент Link в Inertia відрізняється від звичайного посилання?

Звичайний <a href> завантажує сторінку повністю: HTML, CSS, JavaScript, ініціалізація Vue. <Link> з @inertiajs/vue3 перехоплює клік і робить Inertia-візит: запит повертає лише JSON з назвою компонента й props, а сторінка підміняється без перезавантаження.

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

<template>
  <Link href="/posts">Блог</Link>
  <Link :href="`/posts/${post.id}`" prefetch>{{ post.title }}</Link>
</template>

Можливості:

• інші HTTP-методи:

<Link href="/logout" method="post" as="button">Вийти</Link>
<Link :href="`/posts/${post.id}`" method="delete" as="button">Видалити</Link>

Для не-GET методів варто рендерити кнопку (as="button"): посилання, що виконує POST, порушує очікування доступності й «відкрити в новій вкладці».

• дані запиту: :data="{ status: 'draft' }";
• preserve-scroll - не прокручувати на початок (фільтри, пагінація посеред сторінки);
• preserve-state - зберегти локальний стан компонента (введене в поле пошуку);
• replace - замінити запис в історії, а не додати;
• :only="['users']" - часткове перезавантаження лише потрібних props;
• prefetch - завантажити дані заздалегідь при наведенні (75 мс за замовчуванням), prefetch="click" - на натисканні, prefetch="mount" - одразу; кеш на 30 секунд (cache-for).

Активне посилання - порівняння з $page.url чи usePage().url.

Чого не робити:

• <Link> на зовнішні сайти - для них звичайний <a>;
• <Link> на маршрути Laravel, що повертають не Inertia-відповідь (файл для завантаження, сторінку без Inertia) - Inertia покаже модальне вікно з HTML. Для таких адрес - звичайне посилання або Inertia::location() на сервері;
• вихід з облікового запису через GET - лише method="post".

Докладніше в документації: Inertia: посилання