"I encountered a challenge while trying to apply specific classes to the router link component when it was active, meaning when the user was on the exact path, including any hash or query parameters.
The issue arose because Vue Router's active-class and exact-active-class don't consider hash or query parameters, as mentioned in the documentation: https://router.vuejs.org/guide/migration/#Removal-of-the-exact-prop-in-router-link-
One potential solution was using the exact prop, but it was removed in Vue 3. Here's a link to a similar older question where a solution is provided, although it's a bit dated. I'll explain the solution I came up with and if it fits your needs, you can use it."
What you need to do is access route.fullPath and compare it against the desired value.
import { useRoute } from 'vue-router';
const route = useRoute();
<RouterLink
to="/#about"
class="transition-all hover:text-gray-500"
>
<span
:class="{
'text-alternate': route.fullPath === '/#about',
}"
>
About
</span>
</RouterLink>