需求
在前面的路由篇章中，我在写router-view的时候并没有什么特征标识，也就是所有路由映射的组件都可以显示出来。但是在一些经典后台布局中，一般什么组件在哪里显示是需要固定好的，如下：
那么这时候就需要命名视图了，基本语法：<router-view name="视图名称"></router-view>
好了，下面来写一个小例子。
示例
1.首先编写三个首页组件
<script>
// 1. 定义 (路由) 组件。
// 创建header组件
var header = {
template: '<h1 class="header">header组件</h1>',
}
// 创建left组件
var left = {
template: '<h1 class="left">left组件</h1>',
}
// 创建main组件
var main = {
template: '<h1 class="main">main组件</h1>',
}
在创建了这三个区域的组件之后，下面就是考虑如何在首页一个路由/下定义这三个组件。
2.定义三个组件同一个路径的路由规则
// 2. 定义路由
var routes = [{
path: '/',
// 单个路径可以配置多个组件
components: {
'default': header, // 默认router-view的命名
'left': left,
'main': main,
},
}]
3.设置三个组件在app中的使用
<div id="app">
<!-- default命名视图 -->
<router-view></router-view>
<div class="container">
<!-- left左侧栏命名视图 -->
<router-view name="left"></router-view>
<!-- main中心位置的命名视图 -->
<router-view name="main"></router-view>
</div>
</div>
4.浏览器显示如下：
那么剩下的工作就是设置一下样式，将这三个组件布局一下即可。
5.设置样式布局
<style>
html,
body {
margin: 0;
padding: 0;
}
.header {
background-color: orange;
height: 80px;
}
h1 {
margin: 0;
padding: 0;
font-size: 16px;
}
.container {
display: flex;
height: 900px;
}
.left {
background-color: lightgreen;
flex: 2;
}
.main {
background-color: lightpink;
flex: 8;
}
</style>
布局显示如下：
6.完成示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入vue.js库 -->
<script src="lib/vue.js"></script>
<!-- 导入vue-router -->
<script src="lib/vue-router.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
}
.header {
background-color: orange;
height: 80px;
}
h1 {
margin: 0;
padding: 0;
font-size: 16px;
}
.container {
display: flex;
height: 900px;
}
.left {
background-color: lightgreen;
flex: 2;
}
.main {
background-color: lightpink;
flex: 8;
}
</style>
</head>
<body>
<div id="app">
<!-- default命名视图 -->
<router-view></router-view>
<div class="container">
<!-- left左侧栏命名视图 -->
<router-view name="left"></router-view>
<!-- main中心位置的命名视图 -->
<router-view name="main"></router-view>
</div>
</div>
<script>
// 1. 定义 (路由) 组件。
// 创建header组件
var header = {
template: '<h1 class="header">header组件</h1>',
}
// 创建left组件
var left = {
template: '<h1 class="left">left组件</h1>',
}
// 创建main组件
var main = {
template: '<h1 class="main">main组件</h1>',
}
// 2. 定义路由
var routes = [{
path: '/',
// 单个路径可以配置多个组件
components: {
'default': header, // 默认router-view的命名
'left': left,
'main': main,
},
}]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
var router = new VueRouter({
routes, // (缩写) 相当于 routes: routes
})
// 创建vue的实例
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// 注册局部组件，注意：下面使用vue-router的话，不需要在这里注册组件
components: {},
// 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
router, // 等价于 router: router
})
</script>
</body>
</html>
更多精彩原创Devops文章，快来关注我的公众号：【Devops社群】 吧：
