wire:current

wire: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 链接和页面更改一起工作。

精确匹配

默认情况下，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 属性。