Сохранение блока в Livewire

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

Директива @persist с именем блока в макете удерживает разметку между навигационными переходами. Плеер остаётся тем же узлом в DOM, и звук не обрывается.

Давайте вынесем сохраняемый блок в макет под слотом:

<body>
	{{ $slot }}
	@persist('player')
		<audio controls></audio>
	@endpersist
</body>

Страницы откроются по адресам /posts и /posts/create. Давайте на списке свяжем страницы навигационной ссылкой:

<x-layout>
	<h1>Posts</h1>
	<a href="/posts/create" wire:navigate>
		Create
	</a>
</x-layout>

Давайте на форме сделаем обратную ссылку:

<x-layout>
	<h1>Create post</h1>
	<a href="/posts" wire:navigate>
		Back
	</a>
</x-layout>

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