wire:current

wire:current 指令让你可以轻松检测并为页面上当前激活的链接设置样式。

TIP

考虑改用 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 链接与页面切换，除了指定的 class 外，还会自动给匹配的链接加上 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	强制严格路径比较（包含末尾斜杠）