wire:current

wire:current 指令允许你轻松检测和样式化页面上当前活动的链接。

考虑改用 data-current

Livewire 会自动为所有与当前页面匹配的 wire:navigate 链接添加 data-current 属性。你可以使用 Tailwind 的 data-current: 变体或 CSS 直接设置这些链接的样式，而无需 wire:current 指令。了解更多关于自动 data-current →

这是一个在导航栏链接中添加 wire:current 的简单示例，使当前活动链接具有更强的字体粗细：

<nav>
    <a href="/dashboard" ... wire:current="font-bold text-zinc-800">Dashboard</a>
    <a href="/posts" ... wire:current="font-bold text-zinc-800">Posts</a>
    <a href="/users" ... wire:current="font-bold text-zinc-800">Users</a>
</nav>

现在当用户访问 /posts 时，"Posts" 链接将比其他链接具有更强的字体处理。

你应该注意，wire:current 与 wire:navigate 链接和页面更改开箱即用，并且除了指定的类之外，还会自动向匹配的链接添加 data-current 属性。

精确匹配

默认情况下，wire:current 使用部分匹配策略，这意味着如果链接和当前页面共享 URL 路径的开头部分，它将被应用。

例如，如果链接是 /posts，而当前页面是 /posts/1，wire:current 指令将被应用。

如果你希望使用精确匹配，你可以在指令中添加 .exact 修饰符。

这是一个你可能想要使用精确匹配以防止当用户访问 /posts 时"Dashboard"链接被高亮显示的示例：

<nav>
    <a href="/" wire:current.exact="font-bold">Dashboard</a>
</nav>

严格匹配

默认情况下，wire:current 将从其比较中移除尾部斜杠（/）。

如果你想禁用此行为并强制进行严格的路径字符串比较，你可以添加 .strict 修饰符：

<nav>
    <a href="/posts/" wire:current.strict="font-bold">Dashboard</a>
</nav>

故障排除

如果 wire:current 没有正确检测当前链接，请确保以下几点：

• 页面上至少有一个 Livewire 组件，或者在布局中硬编码了 @livewireScripts
• 链接上有 href 属性。

参考

wire:current="classes"

修饰符

修饰符	描述
.exact	使用精确路径匹配而不是部分匹配
.strict	强制严格路径比较，包括尾部斜杠