Laravel / Vue3 / Ziggy using current named route

Question

So I am using Laravel with Vue3 and Inertiajs. I have included Ziggy to be able to use named routes. This works. But I am trying to add active to my link classes whenever the current route is active, like so:

<Link :href="route('user.dashboard')"
    class="nav-link"
    :class="{'active': route().current() == route('user.dashboard')}">
     Dashboard
</Link>

This doesn't work. What does work, however, is both of the following:

:class="{'active': route().current('user.dashboard')}"
:class="route().current('user.dashboard') ? 'active' : ''"

But when clicking on another link, the active class is not being removed, thus resulting in my "Dashboard" link staying active indefinitely. What am I doing wrong here?

Answer 1

can you try this <Link :href="route('user.dashboard')" class="nav-link" :class="{ 'active': $page.props.ziggy.location == route('user.dashboard') }">Dashboard</Link>