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?

Answer 1

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.