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

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

Директива принимает имя публичного метода компонента для навигации или просто URL-адрес. При навигации Livewire автоматически обновляет состояние компонента и перерисовывает шаблон.

Синтаксис

<a wire:navigate href="/posts">
	Posts
</a>

Пример

Давайте создадим навигацию между страницами блога:

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

<div>
	<nav>
		<a wire:navigate href="/posts">Posts</a>
		<a wire:navigate href="/about">About</a>
	</nav>
	<ul>
		@foreach ($posts as $post)
			<li>{{ $post }}</li>
		@endforeach
	</ul>
</div>

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

<div>
	<nav>
		<a href="/posts">Posts</a>
		<a href="/about">About</a>
	</nav>
	<ul>
		<li>Post 1</li>
		<li>Post 2</li>
		<li>Post 3</li>
	</ul>
</div>

Пример

Используем wire:navigate с параметром для динамической навигации:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class PostDetails extends Component
	{
		public $postId;
		
		public function mount($id)
		{
			$this->postId = $id;
		}
		
		public function render()
		{
			return view('livewire.post-details', ['post' => 'Post ' . $this->postId]);
		}
	}
?>

<div>
	<h1>Posts</h1>
	<ul>
		<li>
			<a wire:navigate href="/post/1">Post 1</a>
		</li>
		<li>
			<a wire:navigate href="/post/2">Post 2</a>
		</li>
		<li>
			<a wire:navigate href="/post/3">Post 3</a>
		</li>
	</ul>
</div>

<div>
	<a wire:navigate href="/posts">Back to posts</a>
	<h2>{{ $post }}</h2>
	<p>This is the content of {{ $post }}</p>
</div>

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

<div>
	<a href="/posts">Back to posts</a>
	<h2>Post 1</h2>
	<p>This is the content of Post 1</p>
</div>

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

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