目录
(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>