3.2. Навигация

3.2. Навигация

Вы предпочаете изучать визуально?
Освойте Livewire с помощью наших подробных видеокурсов
Смотрите сейчас

Многие современные веб-приложения создаются как «одностраничные приложения» (SPA). В таких приложениях каждая отображаемая страница больше не требует полной перезагрузки браузера, что позволяет избежать повторной загрузки JavaScript- и CSS-ресурсов при каждом запросе.

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

Хотя большинство PHP-приложений традиционно были многостраничными, Livewire предлагает опыт использования одностраничного приложения с помощью простого атрибута, который можно добавить к ссылкам в вашем приложении: wire:navigate.

1. Базовое использование

Давайте рассмотрим пример использования wire:navigate. Ниже приведён типичный файл маршрутов Laravel (routes/web.php) с тремя компонентами Livewire, определёнными как маршруты:

use App\Livewire\Dashboard;
use App\Livewire\ShowPosts;
use App\Livewire\ShowUsers;
 
Route::get('/', Dashboard::class);
 
Route::get('/posts', ShowPosts::class);
 
Route::get('/users', ShowUsers::class);

Добавив wire:navigate к каждой ссылке в навигационном меню на каждой странице, Livewire предотвратит стандартную обработку клика по ссылке и заменит её своей собственной, более быстрой версией:

<nav>
    <a href="/" wire:navigate>Dashboard</a>
    <a href="/posts" wire:navigate>Posts</a>
    <a href="/users" wire:navigate>Users</a>
</nav>

Ниже представлен разбор того, что происходит при клике на ссылку с wire:navigate:

  • Пользователь кликает по ссылке
  • Livewire предотвращает переход браузера на новую страницу
  • Вместо этого Livewire запрашивает страницу в фоновом режиме и отображает индикатор загрузки в верхней части экрана
  • После получения HTML новой страницы Livewire заменяет текущий URL, тег <title> и содержимое <body> элементами с новой страницы

Эта техника обеспечивает гораздо более быструю загрузку страниц — зачастую в два раза быстрее — и делает приложение «ощущаться» как одностраничное приложение на JavaScript.