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 from parent to child.
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 🙂

[WilliamStam]

wait WHAT... i looked and looked and looked. i just couldnt get it right.

o.m.f.g i had matched but it "looked" like it was all my routes. i was a total idiot. sorry. i have a deep nested route so NATURALY it will return most of the routes.

sorry about this :(

[WilliamStam]

for anyone else that reads this cause they unsure,

const route = useRoute();
console.log(route.matched) 

returns an array of all the paths (i named the names like this cause i was using the startsWith way but it hurt my feelings doing it that way...)

[WilliamStam]

so putting it all together...

import {computed} from "vue";
const route = useRoute();

// pass it a string to check if the route has a parent with that name. its wrapped in a computed so that its reactive
const isChild = computed(() => (name: string) => {
    return route.matched.map((item) => {
        return item.name;
    }).includes(name);
});

and usage

<div>am i a child of: {{ isChild("admin.tickets.reports") }}</div>

or a more complete example

<ul class="navbar-nav">
    <li
        :class="{'active':isChild('admin.tickets.settings')}"
        class="nav-item dropdown"
    >
        <a
            class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
            href="#"
            role="button"
        >
            dropdown
        </a>
        <ul class="dropdown-menu">
            <li class="nav-item">
                <router-link :to="{name: 'admin.tickets.settings.departments'}" class="dropdown-item">
                    Departments
                </router-link>
                
                <router-link :to="{name: 'admin.tickets.settings.statuses'}" class="dropdown-item">
                    Status
                </router-link>
            </li>
        </ul>
    </li>
</ul>