上文中提到在App.vue文件中使用了router-view來展示路由對應的視圖，針對router-view，官方解釋如下，有興趣的童鞋移步鏈接

<router-view> 組件是一個 functional 組件，渲染路徑匹配到的視圖組件。 
 <router-view> 渲染的組件還可以內(nèi)嵌自己的 <router-view>，根據(jù)嵌套路徑，渲染嵌套組件。   
其他屬性 (非 router-view 使用的屬性) 都直接傳給渲染的組件， 很多時候，每個路由的數(shù)據(jù)都是包含在路由參數(shù)中。

在此之前，我們要了解該框架下幾個重要的布局組件：

• AdminLayout管理后臺布局，包含了頭部導航，側邊導航、內(nèi)容區(qū)和頁腳，一般用于后臺系統(tǒng)的整體布局
  
• PageLayout頁面布局，包含了頁頭和內(nèi)容區(qū)，常用于需要頁頭（包含面包屑、標題、額外操作等）的頁面
  

我們以默認的路由/#/dashboard/workplace 為例，看下頁面如何展示對應組件。
框架中如果沒有設置使用異步路由，默認路由在router/config.js中，dashboard配置的路由如下

{
      path: '/',
      name: '首頁',
      component: TabsView, //加載的組件
      redirect: '/login', //默認redirect到login頁面
      children: [
        {
          path: 'dashboard',
          name: 'Dashboard',
          meta: { //元數(shù)據(jù)
            icon: 'dashboard'
          },
          // BlankView 會被渲染在 TabsView 的 <router-view> 中
          component: BlankView,
          children: [
            {
              path: 'workplace',
              name: '工作臺',
              meta: {
                page: {
                  closable: false
                }
              },
              // 異步加載的workplace 會被渲染在 BlankView 的 <router-view> 中
              component: () => import('@/pages/dashboard/workplace'),
            },
            {
              path: 'analysis',
              name: '分析頁',
              component: () => import('@/pages/dashboard/analysis'),
            }
          ]
        }

如上，訪問根路徑會被重定向到#/login，登錄成功后會重定向到/#/dashboard/workplace。
路由匹配三級：1）根路徑 2）/dashboard路徑 3）/dashboard/workplace

根路徑

路由匹配到根路徑，并加載TabsView組件到App.vue中指定的router-view中，我們來看下TabsView組件。
它位于@layouts/TabsView.vue中，主要有AdminLayout包裹contextmenu(右鍵菜單)、tabsHead（多tab標簽欄）以及下級路由渲染的router-view組成。
整個頁面的展示如下

<template>
  <admin-layout>
    <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" /> //右鍵菜單
    <tabs-head
        v-if="multiPage" //是否使用配置的多頁簽
        :active="activePage" //當前頁面是否在使用
        :page-list="pageList"
        @change="changePage"
        @close="remove"
        @refresh="refresh"
        @contextmenu="onContextmenu"
    />
    <div :class="['tabs-view-content', layout, pageWidth]" :style="`margin-top: ${multiPage ? -24 : 0}px`">
      <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction"> //切換動畫
        <a-keep-alive v-if="multiPage" v-model="clearCaches">
          <router-view v-if="!refreshing" ref="tabContent" :key="$route.fullPath" />
        </a-keep-alive>
        <router-view v-else />
      </page-toggle-transition>
    </div>
  </admin-layout>
</template>

/dashboard路徑

dashboard匹配加載BlankView，BlankView是一個空白頁面，主要包含切換動畫和router-view

<template>
  <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
    <router-view />
  </page-toggle-transition>
</template>

還有另外一種PageView，包含了 PageLayout 布局和路由視圖內(nèi)容區(qū)
展示如下

<template>
  <page-layout :desc="desc" :linkList="linkList"> //頭部表述以及面包屑列表
    <div v-if="this.extraImage && !isMobile" slot="extra" class="extraImg">
      <img :src="extraImage"/>
    </div>
    <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
        <router-view ref="page" />
    </page-toggle-transition>
  </page-layout>
</template>

/dashboard/workplace路徑

異步加載@/pages/dashboard/workplace下的組件，并渲染到BlankView組件中
在workplace組件中，主要使用antd組件庫中的Grid布局

以上為vue-antd-admin框架的布局和渲染流程，接下來剖析左側菜單以及路由解析規(guī)則的生成