vue-route的路由配置中父组件没有component怎么处理

概述

        为了方便开发和维护，所以web前端的路由配置路径和前端代码文件路径一般是一致的。但在实际开发中，项目可能会分很多级的菜单，由于很多菜单只有叶子菜单是真正的页面。而中间菜单项只是一个路由配置。

       为了正确路由到底层的功能页面，我们要创建很多个只包含<router-view />的页面。

{
            path: '/',
            name: 'all',
            redirect: '/home',
        },
        {
            path: '/home',
            name: 'home',
            component: () => import('@/views/menu/index.vue'),   //真正的菜单页面
            redirect: '/home/parent1',
            children:[
                {
                    path: 'parent1',
                    name: 'parent1',
                    redirect: '/home/parent1/parent11',
                    component: () => import('@/views/parent1/index.vue'),  //只<router-view />的页面
                    children:[
                        {
                            path:"parent11",
                            name:'parent11',
							redirect: '/home/parent1/parent111',
                            component: () => import('@/views/parent1/parent11/index.vue'), //只<router-view />的页面
							children:[
								{
									path:"parent111",
									name:'parent111',
									component: () => import('@/views/parent1/parent11/parent111/index.vue')  //功能页面
								},
								{
									path:"parent112",
									name:'parent112',
									component: () => import('@/views/parent1/parent11/parent112/index.vue')  //功能的页面
								}
							]
                        },
                        {
                            path:"parent2",
                            name:'parent1',
                            component: () => import('@/views/parent1/index.vue') //只<router-view />的页面
                        }
                    ]
                }
            ]
        }

所以我们创建了很多一样的页面：

<template>

        <router-view/>

</template>

 解决

            我们可以通过直接在conponent里直接配置<router-view>组件来解决这个问题。直接导入的方式如下：

component: { render: c => c("router-view")},

修改之后的路由配置如下：

{
            path: '/',
            name: 'all',
            redirect: '/home',
        },
        {
            path: '/home',
            name: 'home',
            component: () => import('@/views/menu/index.vue'),   //真正的菜单页面
            redirect: '/home/parent1',
            children:[
                {
                    path: 'parent1',
                    name: 'parent1',
                    redirect: '/home/parent1/parent11',
                    component: { render: c => c("router-view")},
                    children:[
                        {
                            path:"parent11",
                            name:'parent11',
							redirect: '/home/parent1/parent111',
                            component: { render: c => c("router-view")},
							children:[
								{
									path:"parent111",
									name:'parent111',
									component: () => import('@/views/parent1/parent11/parent111/index.vue')  //功能页面
								},
								{
									path:"parent112",
									name:'parent112',
									component: () => import('@/views/parent1/parent11/parent112/index.vue')  //功能的页面
								}
							]
                        },
                        {
                            path:"parent2",
                            name:'parent1',
                            component: () => import('@/views/parent1/index.vue') //只<router-view />的页面
                        }
                    ]
                }
            ]
        }