Ссылка на запись в Inertia

Давайте теперь откроем одну запись по её номеру. Общий список не говорит, какую из них читают: нужен отдельный экран с полным текстом выбранной строки.

Номер записи берут из сегмента адреса. Laravel подставляет модель Post по этому номеру и передаёт заголовок и текст на страницу просмотра. В списке компонент Link ведёт на такой адрес без новой загрузки документа.

Давайте опишем адрес списка и адрес одной записи:

<?php
	use App\Models\Post;
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index', [
			'posts' => Post::orderBy('id')->get([
				'id',
				'title',
			]),
		]);
	});

	Route::get('/posts/{post}', function (Post $post) {
		return Inertia::render('Posts/Show', [
			'title' => $post->title,
			'body' => $post->body,
		]);
	});
?>

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

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

	defineProps({
		posts: Array,
	})
</script>

<template>
	<div
		v-for="post in posts"
		:key="post.id"
	>
		<Link :href="'/posts/' + post.id">
			{{ post.title }}
		</Link>
	</div>
</template>

Давайте выведем заголовок и текст на экране записи:

<script setup>
	defineProps({
		title: String,
		body: String,
	})
</script>

<template>
	<h1>{{ title }}</h1>
	<p>{{ body }}</p>
</template>

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