开发者学堂课程【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 的命名。
