#2648·vue-router

Allow defining an inactive-class

Author: christhoferCreated Mar 14, 2019Updated Jan 12, 2026
Labelsfeature requestdiscussionhas PRgroup[router-link redesign]needs RFC

What problem does this feature solve?

We already have prop active-class that will be appended to the element when the route is active. But what if that we need to specify class only when the route is not active?

example: when active => .btn-primary when inactive => .btn-secondary

What does the proposed API look like?

<router-link
    :to="{name: 'purchase'}"
    class="btn"
    active-class="btn-primary"
    inactive-class="btn-secondary">
    Purchase
</router-link>