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

When you are creating the router, you can specify the linkExactActiveClass as a property to set the class that will be used for the active router link.

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

const router = new VueRouter({
  routes,
  linkActiveClass: "active", // active class for non-exact links.
  linkExactActiveClass: "active" // active class for *exact* links.
})

This is documented here.