Route children with just a directory instead of a parent route
Hi, I'm working on a routes tree view for my website. My current directory structure looks like the image provided.
However I'm wondering if it is possible to have children inside of a folder not have their url flattened when there is no parent route. All the .ts files are currently just used to force the child routes to be present in the children field of a route.
Having the child links nested inside of their folder makes it a lot easier to build a tree view since I can simply loop over them.
Thanks a lot for all the help in advance!
13 Replies
Ideally this is the structure I want my useRouter().getAllRoutes() to have.
if I'm understanding correctly
this makes
child.value a child a the parent route. without this, u don't have parent/child relationsYeah that is how I'm currently doing it, but just using a .ts file for the parents since it will have no content anyway
meaning the routes variable won't have the child in the
children property
still I would just use a .vue file.
and a NuxtPage inside of it
why are u doing this? this could be a xy problem
is it because u don't want to render anything on just /parent?Correct. The parent is there to basically group the children
u can use
redirect property in definePageMeta in parent.vue thenYeah that is what I was thinking as well
So that would be the best way of handling that issue then. Do you happen to have a suggestion on how to have the children only show up as children in the
getAllRoutes()?
Basically how to prevent this from happeningu can probably use
.map
I also don't see a getAllRoutes exposed from useRouter
there's a getRoutesSorry, I meant
getRoutes yesrouter.getRoutes().map((route) => route.children)
somethi glike that thenThat would just give me a list of all the children right?
yes
I'm not sure how that would make things easier. I was thinking to just track the nesting level and only allow items to show based on how many slashes its route has
Though typing that out it does feel quite... ugly