Best way to match to the current "parent route"

[thunfisch987]

Hi,
In my project i'm matching the route name to a string to display a specific icon for the current route, but there's only one icon per "main route" / folder.

Example:

pages/

pages/index.vue

pages/subroute/
pages/subroute/index.vue
pages/subroute/about.vue

pages/subroute2/
pages/subroute2/index.vue
pages/subroute2/subsubroute/index.vue

In this example there would be one icon for index.vue, one for subroute/ and one for subroute2.

With only index.vue, subroute/index.vue and subroute2/index.vue i would use:

route.name === 'index' , route.name === subroute and route.name === 'subroute2'

But this becomes trickier when not only having index.vue and also sub-sub-folders...
I'm currently using .split(-)[0] for that but this way seems very impractical to me...

Is there any way i could use nuxt-typed-router and extend it (or something like that) to also have an option to get the "parent route"?
Or extend the router in general?
Or do you have any other ideas?

[NuxtLink for example has the css classes nuxt-link-active and nuxt-link-exact-active (you can also set these to different classes) where i.e.
<NuxtLink :to={name: 'subroute-about'} />
would have the css class nuxt-link-active when visiting subroute/ and have the css class nuxt-link-exact-active when visiting subroute/about(.vue)]

[thunfisch987]

I also just saw that there's experimental support for typed pages in nuxt via unplugin-vue-router 🧐

[thunfisch987]

I'm gonna try the pages:extend hook to add a property to every route

[thunfisch987]

Nevermind, can i do that with definePageMeta?

[thunfisch987]

I did it with
pages:extend (looped through all and set page.meta = { parentName = page.name?.split("-")[0]