wire:navigate feature makes page navigation much faster, providing an SPA-like experience for your users.
This page is a simple reference for the
wire:navigate directive. Be sure to read the page on Livewire's Navigate feature for more complete documentation.
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>
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
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>
For more complete documentation on this feature, visit Livewire's navigate documentation page.