开发者学堂课程【Vue.js 入门与实战：路由-使用命名视图实现经典布局】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8200
路由-使用命名视图实现经典布局
内容介绍
一、先写三个大组件：
二、创建路由对象
三、设计页面，添加样式
什么是经典布局，就是一个页面，上面是 header 区，左侧是侧边栏，右边是主题任务区。 这就是一个主题布局，下面用代码实现：
一、先写三个大组件：
先来三个组件，头 header，代码如下：
var header ={
template: ' <h1>Header头部区域</h1> '}
左边，代码如下：
var leftBox={
template: ' <h1>left侧边栏区域</h1> '}
主体区，代码如下：
var mainBox={
template: ' <h1>mainBox主体区区域</h1> '}
二、创建路由对象
在定义一个 div，代码：
<diV 1d=" app>
<router -view></router-view>
<router -view></router-view>
<router -view></router-view>
</div>
创建路由，代码如下：
<script src=". /1ib/vue -router-3.0.1.js"></ script>
路由对象，代码如下：
Var router = new VueRouter({
Routes：[
{path:’/’,component: hearder},
{path:’/left’,component: leftBox},
{path:’/main’,component: mainBox},
]})
把 router 写在 vm 里面。（网页图形如下：）
显示了三个 header ，与理想结果不同。因为 url 地址只有一个，所以应该把上面的代码修改为，下列代码：
path:' /‘，components: {
default: header ,
left:leftBox，
main: mainBox
}
刷新发现它的显示结果还是和之前这样一样，因为它把header拿到之后还是继续放在 router-view 里面，每一个各放三份。主要还是没有把前面的名字加引号，所以把前面的名字加引号就行了，在 router-view 后面加上名字，name=left/main。
此时刷新结果显示正常，如下图：
三、设计页面，添加样式
1.给 header 加上样式：
代码：
<style>
header {
background-color: orange ;
height: 80px ;}
</ style>
2.布局要把它给包起来，使用：
<div calss = ‘container’> <router -view name =’ left ’ > </router-view>
<router -view name=’main’></router-view></div>
3.再设置颜色，代码如下：
.left{
background- color: 1 ightgreen ,flex:2;}
.main {
background-color: 1ightpink ,flex:8;}
4.在 style 里面添加，如下代码：
代码：
h1 {
margin: 0;
padding: 0;
font-size: 1 6px;
}
此时刷新浏览，网页显示如下：
这其中样式是其次的，主要需要学会 router 的命名。
