FeatureRequest: Add convenience function to find out if current route has a parent that is x

[WilliamStam]

What problem does this feature solve?

Right now there seems to be 2 ways of adding an "active" class to the parent element.

either name the routes as:

parent:  name="parent"
child: name="parent.child"

and then use a route.name.startsWith('parent.') (very loosely coupled approach)

OR

to set the parent up as a router-link as well. this however doesnt play nice with places you dont want it as a a href="..." (in my use case bootstrap dropdown - where the dropdown doesnt close after clicking on a child. the active class gets applied exactly as it should tho)

so my proposal is to add a function to the route of either:

.isChildOf() which given a route name or path or route object? would return true / false

OR

'.getParents()` which returns a list of all the parents this route has. this will allow for a far stronger method of highlighting the parent (or for that matter building a breadcrumb bar)

(i prefer the 2nd approach since it will allow for far more use cases other than a simple .active check)

What does the proposed API look like?

const route = useRoute();
const is_child_of: boolean = (parent: string) => route.isChildOf(parent)

or

const route = useRoute();
const parents: Array<RouteRecordRaw> = route.getparents();

console.log(parents.forEach((item)=>item.name)) // or a if route name = 'x' type function

[posva]

You can already get the parent of a route in the matched array, in short the order is reversed: it goes from deepest child to parent
You can also use useLink() to get the active state of a route (same behavior as router-link).

I'm transferring to a question as it fits better the discussions 🙂