wire:navigate
Livewireのwire:navigate機能は、ページナビゲーションを大幅に高速化し、ユーザーにSPAのような体験を提供します。Livewire's wire:navigate feature makes page navigation much faster, providing an SPA-like experience for your users.
このページは、wire:navigateディレクティブの簡単なリファレンスです。より完全なドキュメントについては、LivewireのNavigate機能に関するページを必ずお読みください。This page is a simple reference for the wire:navigate directive. Be sure to read the page on Livewire's Navigate feature[/docs/navigate] for more complete documentation.
以下は、wire:navigateをナビゲーションバーのリンクに追加する簡単な例です。Below is a simple example of adding wire:navigate to links in a nav bar:
<nav>
<a href="/" wire:navigate>Dashboard</a>
<a href="/posts" wire:navigate>Posts</a>
<a href="/users" wire:navigate>Users</a>
</nav>
これらのリンクのいずれかがクリックされると、Livewireはクリックをインターセプトし、ブラウザにページ全体へのアクセスを許可する代わりに、Livewireはバックグラウンドでページを取得し、現在のページと交換します（これにより、ページナビゲーションがはるかに高速かつスムーズになります）。When any of these links are clicked, Livewire will intercept the click and, instead of allowing the browser to perform a full page visit, Livewire will fetch the page in the background and swap it with the current page (resulting in much faster and smoother page navigation).
ホバー時にページをプリフェッチするPrefetching pages on hover
.hover修飾子を追加することにより、ユーザーがリンクにカーソルを合わせると、Livewireはページをプリフェッチします。 これにより、ユーザーがリンクをクリックしたときに、ページがすでにサーバからダウンロードされています。By adding the .hover modifier, Livewire will pre-fetch a page when a user hovers over a link. This way, the page will have already been downloaded from the server when the user clicks on the link.
<a href="/" wire:navigate.hover>Dashboard</a>
さらに深く掘り下げるGoing deeper
この機能に関するより完全なドキュメントについては、Livewireのnavigateドキュメントページをご覧ください。For more complete documentation on this feature, visit Livewire's navigate documentation page[/docs/navigate].