### 布局组件（routerView）
>[info]用户组件已经创建完成,但访问路由时并不会加载到我们的组件,我们需要一个`routerView`占位符,当匹配到组件时把它挂载到`routerView`位置上,可以写一个`routerView`组件引入,不过一般用`render`方法比较简便
```
{
path: "/user",
component: {
render: h => h("router-view")
},
children: [{
path: "/user/login",
name: "login",
component: () =>
import( /* webpackChunkName: "user" */ "../views/user/Login")
},
{
path: "/user/register",
name: "register",
component: () =>
import( /* webpackChunkName: "user" */ "../views/user/Register")
},
]
}
```
>[info]设计布局组件,并在布局里面提供`routerView`挂载项,在`src`新建`layouts`目录用来存放UserLayout及BasicLayout;在`src`新建`dashboard`目录存放`Analysis`分析页面
UserLayout：抽离出用于登陆注册页面的通用布局
```
<template>
<div>
<div class="desc">Ant Desigin Vue Pro</div>
<router-view></router-view>
</div>
</template>
<script>
export default {};
</script>
<style></style>
```
* `src/router`引入`UserLayout`布局组件,当访问`user`重定向到`/user/login`页面
```
{
path: "/user",
component: () =>
import( /* webpackChunkName: "layout" */ "./layouts/UserLayout"),
children: [{
path: "/user/login",
name: "login",
component: () =>
import( /* webpackChunkName: "user" */ "../views/user/Login")
},
{
path: "/user/register",
name: "register",
component: () =>
import( /* webpackChunkName: "user" */ "../views/user/Register")
},
]
}
```
> BasicLayout：基础页面布局，包含了头部导航，底部信息,侧边栏和内容部分
> 新建Header、Footer、SiderMenu文件
```
<template>
<div>
<Header />
<SiderMenu />
<router-view></router-view>
<Footer />
</div>
</template>
<script>
import Header from "./Header";
import Footer from "./Footer";
import SiderMenu from "./SiderMenu";
export default {
components: {
Header,
Footer,
SiderMenu
}
};
</script>
<style></style>
```
* `src/router`引入`BasicLayout`布局组件,当地址栏路径为`/`时，重定向到分析页
```
{
path: "/",
component: () =>
import( /* webpackChunkName: "layout" */ "../layouts/BasicLayout"),
children: [
// dashboard
{
path: "/",
redirect: "/dashboard/analysis"
},
{
path: "/dashboard",
name: "dashboard",
meta: {
icon: "dashboard",
title: "仪表盘"
},
component: {
render: h => h("router-view")
},
children: [{
path: "/dashboard/analysis",
name: "analysis",
meta: {
title: "分析页"
},
component: () =>
import(
/* webpackChunkName: "dashboard" */
"../views/dashboard/Analysis"
)
}]
}
]
},
```
*
