How to VueJS router-link active style

Question

My page currently has Navigation.vue component. I want to make the each navigation hover and active. The \'hover\' works but \'active\' doesn\'t.

This is how Na

Answer 1

The :active pseudo-class is not the same as adding a class to style the element.

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the mouse button is pressed down and ends when it is released.

What we are looking for is a class, such as .active, which we can use to style the navigation item.

For a clearer example of the difference between :active and .active see the following snippet:

li:active {
  background-color: #35495E;
}

li.active {
  background-color: #41B883;
}

  
:active (pseudo-class) - Click me!
  
.active (class)

---

Vue-Router

vue-router automatically applies two active classes, .router-link-active and .router-link-exact-active, to the component.

---

router-link-active

This class is applied automatically to the component when its target route is matched.

The way this works is by using an inclusive match behavior. For example, will get this class applied as long as the current path starts with /foo/ or is /foo.

So, if we had and , both components would get the router-link-active class when the path is /foo/bar.

---

router-link-exact-active

This class is applied automatically to the component when its target route is an exact match. Take into consideration that both classes, router-link-active and router-link-exact-active, will be applied to the component in this case.

Using the same example, if we had and , the router-link-exact-activeclass would only be applied to when the path is /foo/bar.

---

The exact prop

Lets say we have , what will happen is that this component will be active for every route. This may not be something that we want, so we can use the exact prop like so: . Now the component will only get the active class applied when it is an exact match at /.

---

CSS

We can use these classes to style our element, like so:

 nav li:hover,
 nav li.router-link-active,
 nav li.router-link-exact-active {
   background-color: indianred;
   cursor: pointer;
 }

The tag was changed using the tag prop, .

---

Change default classes globally

If we wish to change the default classes provided by vue-router globally, we can do so by passing some options to the vue-router instance like so:

const router = new VueRouter({
  routes,
  linkActiveClass: "active",
  linkExactActiveClass: "exact-active",
})

Change default classes per component instance ()

If instead we want to change the default classes per and not globally, we can do so by using the active-class and exact-active-class attributes like so:

foo

bar

---

v-slot API

Vue Router 3.1.0+ offers low level customization through a scoped slot. This comes handy when we wish to style the wrapper element, like a list element