Sometimes, we want to set the router-link active style with Vue.js and Vue Router.

In this article, we’ll look at how to set the router-link active style with Vue.js and Vue Router.

How to set the router-link active style with Vue.js and Vue Router?

To set the router-link active style with Vue.js and Vue Router, we can set linkActiveClass and linkExactActiveClass options when we create the VueRouter instance.

For instance, we write

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

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

to set linkActiveClass and linkExactActiveClass to the 'active' class.

The class set for linkExactActiveClass is applied to the links for exact routes.

Then the styles that are set for the active class would be applied to the links that are active.

Conclusion

To set the router-link active style with Vue.js and Vue Router, we can set linkActiveClass and linkExactActiveClass options when we create the VueRouter instance.