vue.js - 具有嵌套子级和仅参数的 Vue Router 4

Question

我想使用 Vue Router 4 制作我的 Vue 3 应用程序，以遵循嵌套子级的模式。这是我的路线列表：

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
                                },
                            ]
                        }
                    ]
                }
            ]
        }
    ]
})

因此，如果我转到 url /# 我想显示 BookingStep1Component，与 /#123/456 也是如此。如果我去 /#123/456/2022-01-01/2022-02-28，我想看看 BookingStep2Component，如果我去 /#123/456/2022-01-01/2022-02 -28/10:00/13:00，我想看看 BookingStep3Component。但是事情在某个地方混淆了，我在某个阶段看不到正确的组件。

我在这里有什么明显的遗漏吗？

Answer 1

不确定，但我不会像在booking-step-1那样在孩子的开头使用“/”。虽然我没有使用路径，但从一个参数开始......应该可以工作，但我会尝试一下。