48. Vue路由-使用命名视图实现经典布局

需求

在前面的路由篇章中，我在写router-view的时候并没有什么特征标识，也就是所有路由映射的组件都可以显示出来。但是在一些经典后台布局中，一般什么组件在哪里显示是需要固定好的，如下：

48. Vue路由-使用命名视图实现经典布局 — image-20200222225250892

那么这时候就需要「命名视图」了，基本语法：<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>