### 布局組件（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"
)
}]
}
]
},
```
*
