概述

        为了方便开发和维护，所以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 />的页面}]}]}