How do I use active class with Vue 3 Router links?

How do I use active class with Vue 3 Router links?

In Vue 3, you can use the active-class prop on <router-link> to specify a class for active links. For example: <router-link to="/home" active-class="active">Home</router-link>.

Can you show me more examples of using active classes?

Sure! You can also use dynamic classes. For instance: <router-link to="/about" :class="{ active: isActive }">About</router-link>, where isActive is a computed property.

What if I want to customize the active class name?

You can customize the active class name by using the active-class prop. For example: <router-link to="/contact" active-class="my-active-class">Contact</router-link>.

Is there a way to apply styles to inactive links as well?

Yes! You can use the exact-active-class prop for links that should only be active when the route exactly matches, and you can apply styles to inactive links using regular CSS.