How to get active class on parent route link when visiting any child route?

Question

Parent menu has links to routes A, B and C. Route B features a sub menu with links to child routes B1 and B2. When visiting B1 for instance, how to get router-link-active class not just on B1 link in sub menu, but also on parent menu B link?

I found this thread from 2 years ago giving custom solution, is there anything simpler today or perhaps some native support to be enabled somehow?

this may help https://stackoverflow.com/questions/46083220/how-to-vuejs-router-link-active-style — Clarance Liberiste Ntwari, Jul 07 '20 at 15:33

score 4 · Accepted Answer · answered Dec 28 '19 at 16:41

4

Try using nested routes.

There are two different active classes for router links: router-link-active and router-link-exact-active. The second is applied to any router link that exactly matches the current path, while the first is applied to router links that partially match the current route. When you nest routes, your path will allow for partial matches, thus applying the class to multiple router links.

See this question for more on the topic.

answered Dec 28 '19 at 16:41

TheAshenKnight

108
1
6

2

Yes, but what if we can't nest routes? – Asef Hossini Jun 15 '22 at 16:24
@AsefHossini from the nested route documentation : "Note that nested paths that start with / will be treated as a root path. This allows you to leverage the component nesting without having to use a nested URL." – Raphael Parent Sep 20 '22 at 15:35

How to get active class on parent route link when visiting any child route?

1 Answers1