Директива wire:navigate.hover

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

Синтаксис

<a href="/target-page" wire:navigate.hover>
	Link text
</a>

Директива wire:navigate.hover добавляется к тегу a вместе с атрибутом href. При наведении мыши на ссылку Livewire инициирует фоновую загрузку указанного URL.

Пример

Создадим компонент навигации с двумя страницами. При наведении на ссылку "О нас" будет происходить предварительная загрузка контента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Navigation extends Component
	{
		public $currentPage = 'home';
		
		public function navigateTo($page)
		{
			$this->currentPage = $page;
		}
		
		public function render()
		{
			$content = match($this->currentPage) {
				'home' => 'Home page content',
				'about' => 'About us page content',
				default => 'Page not found'
			};
			
			return view('livewire.navigation', [
				'content' => $content
			]);
		}
	}
?>

<nav>
	<a href="/" wire:navigate.hover>Home</a>
	<a href="/about" wire:navigate.hover>About</a>
</nav>
<div>
	{{ $content }}
</div>

Результат выполнения кода:

<nav>
	<a href="/">Home</a>
	<a href="/about">About</a>
</nav>
<div>
	Home page content
</div>

Пример с передачей параметров

Директива может использоваться со ссылками, содержащими динамические параметры. При наведении на ссылку будет предзагружена страница с соответствующим идентификатором:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserList extends Component
	{
		public $users = ['user-1', 'user-2', 'user-3'];
		
		public function render()
		{
			return view('livewire.user-list');
		}
	}
?>

<ul>
	@foreach ($users as $user)
		<li>
			<a href="/user/{{ $user }}" wire:navigate.hover>
				View profile {{ $user }}
			</a>
		</li>
	@endforeach
</ul>

Результат выполнения кода:

<ul>
	<li>
		<a href="/user/user-1">
			View profile user-1
		</a>
	</li>
	<li>
		<a href="/user/user-2">
			View profile user-2
		</a>
	</li>
	<li>
		<a href="/user/user-3">
			View profile user-3
		</a>
	</li>
</ul>

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

директиву wire:navigate,
которая выполняет навигацию с переходом между страницами
директиву wire:navigate.preserve-scroll,
которая сохраняет позицию прокрутки при навигации
директиву wire:click,
которая обрабатывает клики по элементам
директиву wire:loading,
которая отображает состояние загрузки