Le mécanisme wire:navigate de Livewire (v3) permet une navigation fluide façon SPA (Single Page Application) dans une application Laravel classique. Voici un tutoriel pour comprendre son fonctionnement interne et le reproduire sans utiliser tout le framework Livewire.
English
wire:navigate
<a href="/page" wire:navigate>Ma page</a>
X-Livewire: true.Une navigation fluide, sans rechargement complet, tout en gardant le rendu Laravel.
Voici comment reproduire le fonctionnement de wire:navigate sans dépendre de Livewire :
document.addEventListener('click', function (e) {
const link = e.target.closest('a[spa-link]');
if (link) {
e.preventDefault();
fetch(link.href, {
headers: {
'X-Requested-With': 'XMLHttpRequest',
'X-Spa-Navigation': 'true'
}
})
.then(res => res.text())
.then(html => {
document.getElementById('spa-content').innerHTML = html;
history.pushState(null, '', link.href);
});
}
});
window.addEventListener('popstate', function () {
fetch(location.href, {
headers: {
'X-Requested-With': 'XMLHttpRequest',
'X-Spa-Navigation': 'true'
}
})
.then(res => res.text())
.then(html => {
document.getElementById('spa-content').innerHTML = html;
});
});
public function showPage()
{
$view = view('pages.ma-page');
if (request()->header('X-Spa-Navigation') === 'true') {
return $view; // sans layout
}
return view('layouts.app', ['content' => $view]);
}
<!-- resources/views/layouts/app.blade.php -->
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="spa-content">
{!! $content ?? '' !!}
</div>
<script src="/js/spa-router.js"></script>
</body>
</html>
<a href="/contact" spa-link>Contact</a>
| Caractéristique | Livewire | Version custom SPA |
|---|---|---|
| Navigation fluide | ✅ | ✅ |
| Gestion scroll/états | ✅ | ⚠️ à gérer manuellement |
| Composants côté serveur | ✅ | ❌ |
| Légereté | ⚠️ moyen-lourd | ✅ ultra-léger |
| Indépendance de Livewire | ❌ | ✅ |
Turbo.js ou Alpine.js.sessionStorage pour le cache client.Tu veux un mini-routeur complet prêt à l’emploi ou un middleware SPA Laravel ? N’hésite pas à demander !
