Dynamically add child routes to an existing route #1156

[Dri4n]

Reason:
we need to add dynamic routes that are associated with a parent.

Unit Test:
router.addRoutes - from line "nested routes existing children relation".

Excuse me if this PR does not meet the guidelines, is my first PR in OpenSource.

Thanks!

[Dri4n]

I do not know, but I think it may also be possible to integrate the parent route according to the name of the parent route.

Thanks

[posva]

Hey, thanks for the PR. I'll need to take a deeper look, I'm not quite convinced by the API yet and would also like to make sure it works with 2-level nested children

[Dri4n]

You're right, I apologize for that ... we need to check if it can be loaded at a second level of nesting, this should be similar to how the asynchronous loading of components in a route behaves.

[Dri4n]

sorry for the delay, I have been very busy in my work

@posva I'm not sure 100% of what I should try, I've done the following tests ...

` let components

router.push('/g1')
components = router.getMatchedComponents()

router.addRoutes([
   { path: '/e1', name: 'E1', component: { name: 'E1Component' }},
   { path: '/f1', name: 'F1', component: { name: 'F1Component' }, parent: '/e1' } // with path association
])

router.addRoutes([
  { path: '/g1', name: 'G1', component: { name: 'G1Component' }, parent: 'F1' } // with name association
])
components = router.getMatchedComponents()`

components return....

[ { name: 'E1Component', _Ctor: { '0': [Object] }, inject: {} }, { name: 'F1Component', _Ctor: { '0': [Object] }, inject: {} }, { name: 'G1Component', _Ctor: { '0': [Object] }, inject: {} } ]

this returns the three levels of routes, the main conditional is that the route to which you associate the daughter route must be created.

Could you give me a guide of what is looked for in its entirety when adding a route to a parent route, thanks in advance.

[posva]

No worries, I'll come back at you.

[xilibro]

great, When does this feature released

[michaelgallaghertw]

hey @posva, I see this issue is still awaiting triage in the project, any idea when it will make it into the flow and into a version of the router?

If the API is still an open question, as I do see inconsistency myself, I would suggest it would follow the more standard string | Location syntax, so possibilities would include:

• parent: '/path'
• parent: { path: '/path' }
• parent: { name: 'name' }

If it is agreed to change this, I have no problem doing it myself, but @Dri4n has done the work so far, so he certainly has first call.

[posva]

I think it's reasonable to force the usage of a name in a route for this

router.addRoutes('name', [...])
router.addRoutes([...])

[KeithMo0425]

@posva
Hi,
When will this feature be released?
We are in urgent need of this new feature, there are other way?

[posva]

Unfortunately, I don't have any estimate for this FR

[jahsome]

Are the any recommended workarounds or third-party libraries to utilize while this PR is up for review?

[yovchev]

@jake-harris before we get this released if you need simple work around you can store the entire route with the childrens in a varible and when you need to push new child update the varible childrens array and pass the entire route tree to the router.addRoutes() and this will overide any existing route configuration. Have a look at this example : https://yovchev.github.io/vue-dynamic-routes/
Example Repository

// src/views/NotFound.vue

import { DynamicRoutes } from '@/routes'

export default {
    methods: {
        loadMissingRoutes() {
            // Load missing route
            DynamicRoutes.children.push({
                name: 'about',
                path: 'about',
                component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
            })
            // Update the routes
            this.$router.addRoutes([DynamicRoutes])
        }
    }
}

[jahsome]

@yovchev - That's clever, I think that should get me where I need to be. Thanks!

[posva]

@Dri4n Sorry for the delay! Could you make the changes so adding routes to a parent requires a name:

router.addRoutes('name', [...])
router.addRoutes([...])

[posva]

Thanks, at the end this was added at ca80c44