Ссылка в Inertia

Давайте познакомимся с компонентом Link. Это ссылка внутри приложения Inertia. Она ведёт на другой адрес Laravel, но оставляет открытый документ на месте: Vue не запускается заново, а на экране оказывается следующая страница.

Обычный переход по адресу браузер понимает иначе. Он скачивает новый HTML, выбрасывает текущее приложение и собирает его с нуля. Адрес в строке при этом меняется, но для приложения это уже другой заход, а не шаг внутри одного сайта.

Link перехватывает клик. Клиент сам запрашивает адрес из href и помечает запрос заголовком X-Inertia. Сервер отвечает объектом следующей страницы, клиент подменяет экран и записывает новый адрес в строку браузера. Человек видит переход, а документ остаётся тем же.

В шаблоне это компонент Vue. Его берут из пакета клиента и ставят на место обычной ссылки. В href пишут адрес маршрута, который возвращает страницу Inertia, а между тегами - подпись, которую увидит человек.

Давайте опишем два таких адреса. Главная откроет экран Home, соседний адрес - экран About:

<?php
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/', function () {
		return Inertia::render('Home');
	});

	Route::get('/about', function () {
		return Inertia::render('About');
	});
?>

Давайте на главной подключим компонент и укажем адрес соседней страницы:

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

<template>
	<h1>Home</h1>
	<Link href="/about">About</Link>
</template>

Экрану About достаточно заголовка. Ссылку на него ставит главная:

<template>
	<h1>About</h1>
</template>

Сделайте переход со страницы работников на страницу отделов, чтобы документ браузера не скачивался заново.