wire:navigate

Livewire 的 wire:navigate 功能使页面导航更加快速，为用户提供类似 SPA 的体验。

本页面是 wire:navigate 指令的简单参考。请务必阅读 Livewire Navigate 功能页面 以获取更完整的文档。

以下是在导航栏链接中添加 wire:navigate 的简单示例：

<nav>
    <a href="/" wire:navigate>Dashboard</a>
    <a href="/posts" wire:navigate>Posts</a>
    <a href="/users" wire:navigate>Users</a>
</nav>

当点击任何这些链接时，Livewire 将拦截点击，而不是让浏览器执行完整的页面访问，Livewire 将在后台获取页面并用当前页面替换它（从而实现更快、更流畅的页面导航）。

使用 data-current 样式化活动链接

Livewire 会自动为任何与当前页面 URL 匹配的 wire:navigate 链接添加 data-current 属性。这允许你使用 CSS 或 Tailwind 设置活动导航链接的样式，而无需任何额外的指令：

<nav>
    <a href="/" wire:navigate class="data-current:font-bold">Dashboard</a>
    <a href="/posts" wire:navigate class="data-current:font-bold">Posts</a>
    <a href="/users" wire:navigate class="data-current:font-bold">Users</a>
</nav>

data-current 属性会在用户在页面之间导航时自动添加和移除。阅读更多关于在 Navigate 文档中突出显示活动链接。

悬停时预取页面

通过添加 .hover 修饰符，当用户悬停在链接上时，Livewire 将预取页面。这样，当用户点击链接时，页面已经从服务器下载完成。

<a href="/" wire:navigate.hover>Dashboard</a>

深入了解

有关此功能的更完整文档，请访问 Livewire 的 navigate 文档页面。

另请参阅

• Navigate — SPA 导航完整指南
• 页面 — 创建可路由的页面组件
• @persist — 在导航期间持久化元素

参考

wire:navigate

修饰符

修饰符	描述
.hover	当用户悬停在链接上时预取页面