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

3,808 阅读3分钟

前言

前面基本演示完了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>

可以从上面看到,我在写regsterlogin的路由路径是/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组件访问loginregister嵌套组件。

下面来看看效果。

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

image-20200222223639400

实际效果如下:

image-20200222223728252

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

image-20200222224024009

			// 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
						}
					]
				},
			]

6.在浏览器查看嵌套路由的效果

image-20200222224118563

可以看到,登陆组件是在Account组件内嵌套显示了。

当然,注册组件也是一样。这样就实现好了一个嵌套组件的效果。

image-20200222224156789

更多精彩原创Devops文章,快来关注我的公众号:【Devops社群】 吧:

image

image