Vue Router 4 with nested children and params-only

Question

I'd like to make my Vue 3 app, using Vue Router 4, to follow a pattern with nested children. This is my list of routes:

export default VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes: [
        {
            name: 'booking-start',
            path: '/',
            component: BookingStep1Component,
            children: [
                {
                    name: 'booking-step-1',
                    path: '/:from_gid/:to_gid',
                    component: BookingStep1Component,
                    children: [
                        {
                            name: 'booking-step-2',
                            path: ':date_from/:date_to',
                            component: BookingStep2Component,
                            children: [
                                {
                                    name: 'booking-step-3',
                                    path: ':time_from/:time_to',
                                    component: BookingStep3Component
                                },
                            ]
                        }
                    ]
                }
            ]
        }
    ]
})

So if I go the the url /# I would like to get the BookingStep1Component displayed, same goes with /#123/456. If I go to /#123/456/2022-01-01/2022-02-28, I'd like to see BookingStep2Component, and if I go to /#123/456/2022-01-01/2022-02-28/10:00/13:00, I'd like to see BookingStep3Component. But things get mixed up somewhere and I do not see the right component at some stage.

Is there anything obvious I am missing here?

score 0 · Answer 1 · answered Feb 07 '22 at 11:27

0

Not sure, but I do not use a "/" at the beginning of childs like at booking-step-1. Although I have not used paths, beginning with a param ... should work, but I would try it out.

answered Feb 07 '22 at 11:27

Ehrlich_Bachman

772
1
10
23

My bad to mention that, but I tried that as well, without success though. – chr_lt_ney Feb 07 '22 at 12:54
... bummer. And without "#"? I vaguely remember, that that was needed, but I am not sure, if that has changed or if I just disabled that myself. And if you do path: 'step-1/:from_gid/:to_gid'. I would assume, that you add at each "parent component" the ? Any errors or warnings in the console? I am although not so sure about ":" in params ... but would gues that should work, too. – Ehrlich_Bachman Feb 07 '22 at 13:28

Vue Router 4 with nested children and params-only

1 Answers1