目录
（2）给三个组件的模板对象，定义布局，flex实现下方左右布局
一、前言
上一篇文章我们介绍了路由-使用children属性实现路由嵌套，详细可参考博文：原创 Vue笔记整理，专题之路由：7、路由-使用children属性实现路由嵌套 ，这篇文章我们将介绍：路由-命名视图实现经典布局。
二、路由-命名视图实现经典布局
1、需要的实现效果展示
2、使用命名视图
（1）代码-命名视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>11.路由-命名视图实现经典布局</title>
<script src="./lib/vue-2.4.0.js"></script>
<!-- 步骤1: 安装 vue-router 路由模块 -->
<script src="./lib/vue-router-3.0.1.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!-- 步骤5: 展示匹配到的组件
//其中router-view标签的name属性值,
//对应路由匹配规则，components中的属性名，
//没有指定name，即对应的属性名为default
-->
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
<script>
//步骤3：创建，三个组件的模板对象
var header = {
template: '<h1>Header头部区域</h1>'
}
var leftBox = {
template: '<h1>Left侧边栏区域</h1>'
}
var mainBox = {
template: '<h1>mainBox主体区域</h1>'
}
//步骤2：创建路由对象，定义 routes匹配规则
var router = new VueRouter({
routes: [
// 这样写是不行的
// { path: '/', component: header },
// { path: '/left', component: leftBox },
// { path: '/main', component: mainBox }
// 这里不使用 component，使用 components，
// 表示这个根路径路由下，可以有多个组件
{ path: '/', components: {
'default': header,//属性名 : 属性值(组件)，
'left': leftBox,
'main': mainBox
}
}
]
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
//步骤4: 通过router属性，将路由规则对象，注册到 vm 实例上。
// router: router
router //如上面属性值和属性名完全一样，可以简写成这样。
});
</script>
</body>
</html>
这里代码作了详细注释，就不多说了。
关键是：router-view标签的name属性值 对应 components中的属性名
（2）效果展示-命名视图
运行程序，效果如下图：
这样命名视图就搞定了，那么实现经典布局，就差写样式了。
3、实现经典布局-写样式
（1）给三个组件的模板对象，添加样式-颜色
（2）给三个组件的模板对象，定义布局，flex实现下方左右布局
效果如下图：
（3）取消多余边距
效果如下图：
三、最终修改代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>11.路由-命名视图实现经典布局</title>
<script src="./lib/vue-2.4.0.js"></script>
<!-- 步骤1: 安装 vue-router 路由模块 -->
<script src="./lib/vue-router-3.0.1.js"></script>
<style>
html,
body { /* 最外层边距，进行取消 */
margin: 0;
padding: 0;
}
h1 { /* h1标签边距太大，进行取消 */
margin: 0;
padding: 0;
font-size: 16px;
}
.header {
background-color: orange;
height: 80px;
}
.container{
display: flex;/* flex实现下方左右布局 */
height: 600px;
}
.left {
background-color: lightgreen;
flex: 2;
}
.main {
background-color: lightpink;
flex: 8;
}
</style>
</head>
<body>
<div id="app">
<!-- 步骤5: 展示匹配到的组件
//其中router-view标签的name属性值,
//对应路由匹配规则，components中的属性名，
//没有指定name，即对应的属性名为default
-->
<router-view></router-view>
<div class= "container">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
<script>
//步骤3：创建，三个组件的模板对象
var header = {
template: '<h1 class="header">Header头部区域</h1>'
}
var leftBox = {
template: '<h1 class="left">Left侧边栏区域</h1>'
}
var mainBox = {
template: '<h1 class="main">mainBox主体区域</h1>'
}
//步骤2：创建路由对象，定义 routes匹配规则
var router = new VueRouter({
routes: [
// 这样写是不行的
// { path: '/', component: header },
// { path: '/left', component: leftBox },
// { path: '/main', component: mainBox }
// 这里不使用 component，使用 components，
// 表示这个根路径路由下，可以有多个组件
{ path: '/', components: {
'default': header,//属性名 : 属性值(组件)，
'left': leftBox,
'main': mainBox
}
}
]
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
//步骤4: 通过router属性，将路由规则对象，注册到 vm 实例上。
// router: router
router //如上面属性值和属性名完全一样，可以简写成这样。
});
</script>
</body>
</html>