Директива `wire:navigate`⚓︎

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

Эта страница служит простым справочником для директивы wire:navigate. Обязательно прочтите страницу о функции Navigate в Livewire для получения более полной документации.

Ниже приведён простой пример добавления wire:navigate к ссылкам в навигационной панели:

<nav>
    <a href="/" wire:navigate>Дашборд</a>
    <a href="/posts" wire:navigate>Посты</a>
    <a href="/users" wire:navigate>Пользователи</a>
</nav>

Когда любая из этих ссылок нажата, Livewire перехватит клик и вместо того, чтобы позволить браузеру выполнить полную загрузку страницы, Livewire загрузит страницу в фоновом режиме и заменит её текущей страницей (обеспечивая гораздо более быструю и плавную навигацию).

Стилизация активных ссылок с помощью data-current⚓︎

Livewire автоматически добавляет атрибут data-current к любой ссылке wire:navigate, которая совпадает с URL-адресом текущей страницы. Это позволяет стилизовать активные навигационные ссылки с помощью CSS или Tailwind без каких-либо дополнительных директив:

<nav>
    <a href="/" wire:navigate class="data-current:font-bold">Дашборд</a>
    <a href="/posts" wire:navigate class="data-current:font-bold">Посты</a>
    <a href="/users" wire:navigate class="data-current:font-bold">Пользователи</a>
</nav>

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

Предзагрузка страниц при наведении⚓︎

Добавив модификатор .hover, Livewire загрузит страницу заранее, когда пользователь наводит указатель на ссылку. Таким образом, страница уже будет загружена с сервера до того, как пользователь нажмёт на ссылку.

<a href="/" wire:navigate.hover>Дашборд</a>

Подробнее⚓︎

Для получения более полной документации по этой функции посетите страницу документации Livewire о navigate.

Смотрите также⚓︎

Navigate — Полное руководство по SPA-навигации
Pages — Создание компонентов страниц с маршрутизацией
@persist — Сохранение элементов во время навигации

Справочник⚓︎

wire:navigate

Модификаторы⚓︎

Модификатор	Описание
`.hover`	Предзагружает страницу, когда пользователь наводит указатель на ссылку

Директива wire:navigate⚓︎