Active router link CSS class

The Vue Router automatically applies router-link-active to active router links. No need to compare the URL yourself.

<router-link to="/link">Link</router-link>

.router-link-active {
  background: blue;
}

If you have nested routes, you can also use router-link-exact-active to differentiate between active routes and the exact active child route.

const routes = [
  {
    path: '/parent',
    children: [{ path: 'child' }],
  },
]

.router-link-exact-active {
  background: red;
}

Now visiting /parent/child a link with /parent would be router-link-active, but only /parent/child is both router-link-active and router-link-exact-active.