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 会拦截点击，不让浏览器做整页跳转，而是在后台获取页面并与当前页交换（从而获得更快、更流畅的导航）。

wire:navigate 只拦截同源页面访问。外链、target 非 _self 的链接、下载链接，以及 mailto:、tel: 等 URL 会自动回退为浏览器默认行为。

用 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 导航完整指南
• Pages — 创建可路由的页面组件
• @persist — 在导航期间持久化元素

参考

wire:navigate

修饰符

修饰符	说明
.hover	用户悬停在链接上时预取页面