上文中提到在App.vue文件中使用了router-view来展示路由对应的视图，针对router-view，官方解释如下，有兴趣的童鞋移步链接
<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。
<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。
其他属性 (非 router-view 使用的属性) 都直接传给渲染的组件， 很多时候，每个路由的数据都是包含在路由参数中。
在此之前，我们要了解该框架下几个重要的布局组件：
-
AdminLayout管理后台布局，包含了头部导航，侧边导航、内容区和页脚，一般用于后台系统的整体布局
-
PageLayout页面布局，包含了页头和内容区，常用于需要页头（包含面包屑、标题、额外操作等）的页面
我们以默认的路由/#/dashboard/workplace 为例，看下页面如何展示对应组件。
框架中如果没有设置使用异步路由，默认路由在router/config.js中，dashboard配置的路由如下
{
path: '/',
name: '首页',
component: TabsView, //加载的组件
redirect: '/login', //默认redirect到login页面
children: [
{
path: 'dashboard',
name: 'Dashboard',
meta: { //元数据
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 布局和路由视图内容区
展示如下
<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框架的布局和渲染流程，接下来剖析左侧菜单以及路由解析规则的生成
