Vue-router - 使用两个不同的路径,孩子不会从第二个路径加载



路由中的子项,名称:matchDay注册结果不会被加载,当我将它们移动到名称:matchDays时,它们加载正常。但是我需要一个不同的顶级组件,主页布局比率5050 -> 主页布局比率2575

我在 Vue 文档中找不到工作示例

const router = new VueRouter({
    mode: 'history',
    routes:
    [
        {
            path: '/:lang',
            name: 'matchDays',
            component: HomepageLayoutRatio5050,
            children: [
            {
                path: '/:lang',
                components: {
                    descriptionBlock: MatchDaysDescription,
                    mainBlock: MatchDaysTable,
                    notesBlock: MatchDaysNotes
                }
            },{
                path: '/:lang/matchday/registration/:id',
                name: 'matchDayRegistration',
                components: {
                    descriptionBlock: RegistrationFormDescription,
                    mainBlock: RegistrationForm
                }
            }]
        },
        {
            path: '/:lang/matchday/registration/result/:id',
            name: 'matchDayRegistrationResult',
            component: HomepageLayoutRatio2575,
            children: [
                {
                    path: '/:lang/matchday/registration/result/:id',
                    components: {
                        descriptionBlock: RegistrationResultDescription,
                        mainBlock: RegistrationResultDetails,
                        notesBlock: RegistrationResultNotes
                    }
                }]
        }
    ]
});

主页布局比率2575确实加载,

但是子项:描述块:注册结果说明 主块: 注册结果详细信息注释块: 注册结果注释没有。

找到了解决方案,作为本地化部分,/:lang 是罪魁祸首,阻塞了第二条路线(...逻辑(我对路由架构进行了重新排序。

为了人们的利益,遇到困难,寻找复杂的vue路由器视图解决方案,本地化意识,这是解决方案:-(

const router = new VueRouter({
    mode: 'history',
    routes:
        [
            {
                path: '/:lang',
                component: HomeSweetHome,
                children: [{
                    path: '/:lang',
                    name: 'matchDays',
                    components: {
                        homepageSidebarLayoutRatio: HomepageSidebarLayoutRatio5050,
                        homepageMainLayoutRatio: HomepageMainLayoutRatio5050,
                        footer: FooterGray
                    },
                    children: [
                        {
                            path: '/:lang',
                            components: {
                                descriptionBlock: MatchDaysDescription,
                                mainBlock: MatchDaysTable,
                                notesBlock: MatchDaysNotes
                            }
                        },{
                            path: '/:lang/matchday/registration/:id',
                            name: 'matchDayRegistration',
                            components: {
                                descriptionBlock: RegistrationFormDescription,
                                mainBlock: RegistrationForm
                            }
                        }
                    ]
                },{
                    path: '/:lang/matchday/registration/result/:id',
                    components: {
                        homepageSidebarLayoutRatio: HomepageSidebarLayoutRatio2575,
                        homepageMainLayoutRatio: HomepageMainLayoutRatio2575,
                        footerNotesBlock: RegistrationResultFooterNotes,
                        footer: FooterBlack,
                    },
                    children:[{
                        path: '/:lang/matchday/registration/result/:id',
                        name: 'matchDayRegistrationResult',
                        components: {
                            descriptionBlock: RegistrationResultDescription,
                            mainBlock: RegistrationResultDetails
                        }
                    }]
                }]
            }
        ]
});