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

Just add to @Bert's solution to make it more clear:

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

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

As one can see, this line should be removed:

linkActiveClass: "active", // active class for non-exact links.

this way, ONLY the current link is hi-lighted. This should apply to most of the cases.

David