addRoute does not add new routes as children

[antony-k1208]

Version

4.0.0-rc.3

Reproduction link

https://codesandbox.io/s/bitter-dew-ie45g?file=/src/router/index.ts

Steps to reproduce

Check the link and open the console to see the output of all registered routes. Check the last object's children.

What is expected?

All dynamically added routes should be added to the Preview's route children array. Since I am adding them to that exact route.

What is actually happening?

Preview-First and Preview-Second are not getting added as child but as root routes with the path pointing to the correct location.

The children array of Preview does contain only the one added in the beginning via the routes array.

[posva]

The children property of routes in getRoutes is the initial value, it's not the current children, it's the raw route record, it's not really meant to be used by the user, it's used internally when creating the routes. It could even be removed by the router to avoid confusion.

What would be the use case for having children? getRoutes already return all the routes

[antony-k1208]

Hey @posva, what a fast reply! Thanks for that.

I am trying to build a sub navigation for routes with children and the easiest why would be to iterate over that exact children array I guessed. But it breaks as soon as I am adding routes dynamically, which is too bad.

In some other project we wanted to be able to build a dynamic page builder and be able to persist the current user settings, for which we are using getRoutes among others. And here the same problem applies.

Any suggestions from your side? :)

Best,
Antony

[posva]

What do you mean by sub navigation?

[antony-k1208]

Like a multi level navigation? Like the one shown here for example: https://www.w3schools.com/howto/howto_css_subnav.asp

Can you check my Preview.vue from inside the views folder? Do you see how it is quite cumbersome to get all child routes for that particular route? I had to use a naming convention to be able to filter all routes somehow.

[posva]

You realize that even if children contains the route records that are dynamically added, you will still need to filter the routes array for your use case since getRoutes returns all routes an a flattened array?

[antony-k1208]

getRoutes returns them also as flattened or only? Because from what I can see in the in the console output. children is existent on all routes. So we could either update them when using addRoutes to have an exact representation or extend getRoutes by a parameter? When applied it only lists the route with its children as flattened array. All children should get a isChild property.

What do you think?

[posva]

I think building a navbar shouldn't be part of the router code, it's application code that should format the routes exported by the router. getRoutes() should take no parameters, what is returned can be adapted but should go through an RFC like vuejs/rfcs#122.

I would rather see a parent property than an isChild property tbh. But besides that, this is unfortunately too vague to make sure the API covers all existing cases, an RFC would help gather feedback and expose what is necessary to users to create their own app-specific apis around it

For example, it's not clear if only original records should be pointed to inside children and parent, completely ignoring alias routes which are also present in the array returned by getRoutes

[antony-k1208]

@posva thank you very much for your time and feedback. Very much appreciated :). I will check your link and suggestions.