Директива `wire:current`⚓︎

Директива wire:current позволяет легко обнаруживать и стилизовать активные ссылки на странице.

Рассмотрите использование data-current вместо

Livewire автоматически добавляет атрибут data-current ко всем ссылкам wire:navigate, которые соответствуют текущей странице. Вы можете стилизовать эти ссылки напрямую с помощью варианта Tailwind data-current: или CSS, без необходимости в директиве wire:current. Узнайте больше об автоматическом data-current →

Вот простой пример добавления wire:current к ссылкам в навигационной панели, чтобы активная ссылка имела более жирный шрифт:

<nav>
    <a href="/dashboard" ... wire:current="font-bold text-zinc-800">Дашборд</a>
    <a href="/posts" ... wire:current="font-bold text-zinc-800">Посты</a>
    <a href="/users" ... wire:current="font-bold text-zinc-800">Пользователи</a>
</nav>

Теперь, когда пользователь посещает /posts, ссылка «Посты» будет иметь более жирное оформление шрифта по сравнению с другими ссылками.

Обратите внимание, что wire:current работает из коробки со ссылками wire:navigate и изменениями страниц, и автоматически добавляет атрибут data-current к соответствующим ссылкам в дополнение к указанным классам.

Точное совпадение⚓︎

По умолчанию wire:current использует стратегию частичного совпадения, означающую, что оно будет применено, если ссылка и текущая страница делят начальную часть пути URL.

Например, если ссылка /posts, а текущая страница /posts/1, директива wire:current будет применена.

Если вы хотите использовать точное совпадение, вы можете добавить модификатор .exact к директиве.

Вот пример, где вы можете использовать точное совпадение, чтобы предотвратить выделение ссылки «Дашборд», когда пользователь посещает /posts:

<nav>
    <a href="/" wire:current.exact="font-bold">Дашборд</a>
</nav>

Строгое совпадение⚓︎

По умолчанию wire:current удаляет завершающие слэши (/) из сравнения.

Если вы хотите отключить это поведение и принудить строгое сравнение строк пути, вы можете добавить модификатор .strict:

<nav>
    <a href="/posts/" wire:current.strict="font-bold">Дашборд</a>
</nav>

Решение проблем⚓︎

Если wire:current не обнаруживает текущую ссылку правильно, убедитесь в следующем:

На странице есть хотя бы один компонент Livewire, или в вашем макете жестко закодирован @livewireScripts
У ссылки есть атрибут href.

Справочник⚓︎

wire:current="classes"

Модификаторы⚓︎

Модификатор	Описание
`.exact`	Использовать точное совпадение пути вместо частичного
`.strict`	Принудить строгое сравнение пути, включая завершающие слэши

Директива wire:current⚓︎