概述

? ? ? ? 為了方便開發和維護，所以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 />的頁面}]}]}