47. Vue使用children属性实现路由嵌套

前言

前面基本演示完了vue-router的基本用法，但是当组件之间嵌套子组件，这个嵌套的路由该怎么写呢？

可能这一句话不能够直接说明情况，下面来直接看例子。

嵌套路由示例

1.首先写三个组件，一个account组件，另外两个子组件login和register

		<script>		
			
			// 1. 定义 (路由) 组件。
			// 可以从其他文件 import 进来
			
			// 创建account组件
			var account = {
				template: "#account",
			}
			
			// 创建登陆组件login
			var login = {
				template: "<h3>登陆组件</h3>",
			}
			
			// 创建注册组件register
			var register = {
				template: "<h3>注册组件</h3>",
			}

2.编写这三个组件的路由规则，如下：

			// 2. 定义路由
			// 每个路由应该映射一个组件。其中"component" 可以是
			// 通过 Vue.extend() 创建的组件构造器，
			// 或者，只是一个组件配置对象。
			// 我们晚点再讨论嵌套路由。
			var routes = [
			  { path: '/', redirect: '/account' },
			  { path: '/account', component: account },
			  { path: '/account/login', component: login },
			  { path: '/account/register', component: register },
			]
			
			// 3. 创建 router 实例，然后传 `routes` 配置
			// 你还可以传别的配置参数, 不过先这么简单着吧。
			var router = new VueRouter({
			  routes, // (缩写) 相当于 routes: routes
			  linkActiveClass: "myactive", // 自定义选中的class
			})
			
			// 创建vue的实例
			var vm = new Vue({
				el: '#app',
				data: {},
				methods:{},				
				// 注册局部组件，注意：下面使用vue-router的话，不需要在这里注册组件
				components:{},
				// 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
				router,  // 等价于 router: router
			})
			
		</script>

可以从上面看到，我在写regster和login的路由路径是/account/register和/account/login，其实跟/account路由没有太大的关系。

只是简单写了个前缀而已。

3.编写组件展示的`router-view`

		<div id="app">
			
			<router-link to="/account">Account</router-link>
			
			<!-- 路由出口 -->
			<!-- 路由匹配到的组件将渲染在这里 -->
			<transition mode="out-in">
				<router-view></router-view>
			</transition>
			
		</div>

		<template id="account">
			<div>
				<h1>这是 Account 组件</h1>
				
				<!-- 设置嵌套组件的跳转标签 -->
				<router-link to="/account/login">登录</router-link>
				<router-link to="/account/register">注册</router-link>
				
				<!-- 设置嵌套组件的router-view -->
				<router-view></router-view>
			</div>
		</template>

可以看到，父组件app下只能直接访问account组件，然后再通过account组件访问login和register嵌套组件。

下面来看看效果。

4.在浏览器中点击`登陆`组件，确认是否在`account`组件下，显示`登陆`组件。

47. Vue使用children属性实现路由嵌套 — image-20200222223639400

实际效果如下：

5.使用`children`属性，修改嵌套路由规则

			// 2. 定义路由
			// 每个路由应该映射一个组件。其中"component" 可以是
			// 通过 Vue.extend() 创建的组件构造器，
			// 或者，只是一个组件配置对象。
			// 我们晚点再讨论嵌套路由。
			var routes = [
				{
					path: '/',
					redirect: '/account'
				},
				{
					path: '/account',
					component: account,
					// 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，
					// 否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
					children: [
						{
							path: 'login',
							component: login
						},
						{
							path: 'register',
							component: register
						}
					]
				},
			]