Using active class in Vue.js

Question

I'm using active class in my router link like this :

<li class="list-group-item">
  <router-link :to="{name:'category'}" active-class="active">
    Category
  </router-link>
</li>

this code is working and the link is active but i want this link to be active on two router link i.e. on category and subcategory how can i achieve this result.

Is subcategory a child route of category?

Phil
– Phil

2020-11-30 05:25:12 +00:00
Commented Nov 30, 2020 at 5:25 — Phil
– Phil, Commented Nov 30, 2020 at 5:25
@Phil: No it is not a child route

user3653474
– user3653474

2020-11-30 05:27:38 +00:00
Commented Nov 30, 2020 at 5:27 — user3653474
– user3653474, Commented Nov 30, 2020 at 5:27
Try using linkExactActiveClass of vue router link

Naren
– Naren

2020-11-30 06:08:59 +00:00
Commented Nov 30, 2020 at 6:08 — Naren
– Naren, Commented Nov 30, 2020 at 6:08

Phil · Accepted Answer · 2020-11-30 05:45:23Z

1

Given your subcategory route is not a child of category, you'll have to implement the logic yourself

<router-link
  :to="{ name: 'category' }"
  active-class="active"
  :class="{
    active: $route.matched.some(({ name }) => name === 'subcategory')
  }"
>
  Category
</router-link>

This will add the active class if the route matches category (or any of its children) as well as subcateory (or any of its children).

answered Nov 30, 2020 at 5:45

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using active class in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related