Comprehensive Guide to Vue Router Link Active Styling

Fundamental Differences Between CSS Pseudo-classes and Vue Router Active Classes

In web development, there exists a fundamental distinction between CSS :active pseudo-class and Vue Router's active classes. The :active pseudo-class represents the state when a user is activating an element, typically starting from mouse press and ending with release. In contrast, Vue Router's active classes are dynamically applied CSS classes based on route matching status, used to identify currently active navigation items.

/* CSS pseudo-class example */
li:active {
  background-color: #35495E;
}

/* Vue Router active class example */
li.router-link-active {
  background-color: #41B883;
}

Automatically Applied Active Classes in Vue Router

Vue Router automatically applies two crucial CSS classes to the <router-link> component: router-link-active and router-link-exact-active.

router-link-active Class

The router-link-active class is automatically applied when the target route of <router-link> matches the current path. This matching employs inclusive behavior, applying the class whenever the current path starts with the target route or matches it exactly.

<router-link to="/user" tag="li">User</router-link>
<router-link to="/user/profile" tag="li">User Profile</router-link>

When the path is /user/profile, both links receive the router-link-active class.

router-link-exact-active Class

The router-link-exact-active class is applied only when the target route exactly matches the current path. In such cases, both active classes are applied to the component.

Continuing with the previous example, when the path is /user/profile, only the second link receives the router-link-exact-active class.

The Role of the exact Prop

The exact prop controls the precision of route matching. For links pointing to the root path /, without using the exact prop, the link will appear active across all routes.

<!-- Active on all routes -->
<router-link to="/" tag="li">Home</router-link>

<!-- Active only on exact root path match -->
<router-link to="/" exact tag="li">Home</router-link>

Styling Configuration Practices

Basic Styling Configuration

Apply active styles using CSS selectors to handle both hover and active states simultaneously:

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

Global Class Name Configuration

Modify default class names globally through Vue Router instance configuration options:

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

Component-Level Class Name Configuration

For individual <router-link> components, customize using active-class and exact-active-class attributes:

<router-link to="/foo" active-class="active">Foo</router-link>
<router-link to="/bar" exact-active-class="exact-active">Bar</router-link>

Advanced Customization with v-slot API

Vue Router 3.1.0+ provides the v-slot API, allowing more granular control, particularly useful when applying styles to wrapper elements:

<router-link
  to="/foo"
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <li
    :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
  >
    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
  </li>
</router-link>

Detailed Route Matching Mechanism

Vue Router determines link activation status considering the following factors: route record matching and parameter value matching. For nested routes, links pointing to ancestor routes are also considered active when relevant parameters match. Query parameters and hash values do not affect activation status determination.

Practical Application Examples

Consider the following route configuration and navigation component:

const routes = [
  {
    path: '/user/:username',
    component: User,
    children: [
      {
        path: 'role/:roleId',
        component: Role,
      },
    ],
  },
]

<!-- Navigation component -->
<router-link to="/user/erina" tag="li">User</router-link>
<router-link to="/user/erina/role/admin" tag="li">Role</router-link>

When the path is /user/erina/role/admin, both links receive the router-link-active class, but only the second link receives the router-link-exact-active class.

Best Practice Recommendations

1. Use the exact prop to prevent root path links from activating on all pages

2. Choose between global configuration and component-level configuration based on project requirements

3. Prefer using the v-slot API for complex layouts

4. Maintain consistency between active and hover styles for optimal user experience