Question

路线中的子项，名称：matchDayRegistrationResult不会被加载，当我将其移动到名称：matchDays时，它们会很好地加载。但是我需要一个不同的顶级组件HomepageLayoutRatio5050-> HomepageLayoutRatio2575

我在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
                    }
                }]
        }
    ]
});

HomepageLayoutRatio2575确实加载了，

但子级：descriptionBlock：RegistrationResultDescription mainBlock：RegistrationResultDetails注释Block： RegistrationResultNotes不需要。

Answer 1

找到了解决方案，作为本地化部分，/：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
                        }
                    }]
                }]
            }
        ]
});

Vue路由器-使用两条不同的路径，子级不会从第二条路径加载

1 个答案: