Vue路由(vue-router children)路由嵌套

Vue路由(vue-router children)路由嵌套教程

在 Vue 中，Vue 路由(vue-router) 可以通过 children 属性来实现路由的嵌套。

Vue路由(vue-router children)路由嵌套数详解

语法

<body>
	<div id="app">
		<router-link to="/account">Account</router-link>
		<router-view></router-view>
	</div>
	<template id="temp1">
		<div>
			<h1>这是 Account 组件</h1>
			<router-link to="/account/login">登录</router-link>
			<router-link to="/account/register">注册</router-link>
			<router-view></router-view>
		</div>
	</template>
</body>
<script type="text/javascript">
	var account = {
		template: '#temp1'
	}
	var login = {
		template: '<h3>登录</h3>'
	}
	var register = {
		template: '<h3>注册</h3>'
	}
	var routerObj = new VueRouter({
		routes: [ 
			{
				path: "/account", 
				component: account,
				//使用 children 设置子路由，同时，子路由的 path 前面 不需要加 / 
				children: [
					{path:'login', component: login},
					{path:'register', component: register}
				]
			},
		]
	})
</script>

说明

首先，我们在定义 VueRouter 对象时，通过 children 属性，设置路由子路由，这里设置了路由 account 下面包含两个子路由，分别为 login 和 register。

子路由的 path 属性，不能以 / 开始，因为如果以 / 开始，那么子路由就不是从 /account 开始了。接着，我们需要在父组件对象里面通过 /父路由/子路由的形式，实现子路由。

最后，我们需要在父组件对象里面通过 router-view 标签，设置子路由的占位符。

案例

子路由

使用 children 属性，设置子路由

<!DOCTYPE html>
<html>
<head>
	<title>Vue路由(vue-router children)路由嵌套</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<router-link to="/account">Account</router-link>
		<router-view></router-view>
	</div>
	<template id="temp1">
		<div>
			<h1>这是 Account 组件</h1>
			<router-link to="/account/login">登录</router-link>
			<router-link to="/account/register">注册</router-link>
			<router-view></router-view>
		</div>
	</template>
    <p>嗨客网（www.haicoder.net）</p>
</body>
<script type="text/javascript">
	var account = {
		template: '#temp1'
	}
	var login = {
		template: '<h3>登录</h3>'
	}
	var register = {
		template: '<h3>注册</h3>'
	}
	var routerObj = new VueRouter({
		routes: [ 
			{
				path: "/account", 
				component: account,
				//使用 children 设置子路由，同时，子路由的 path 前面 不需要加 / 
				children: [
					{path:'login', component: login},
					{path:'register', component: register}
				]
			},
		]
	})
	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "嗨客网"
        },
        router: routerObj 
    });
</script>
</html>

程序运行后，浏览器显示效果如下：

11 vue router children.png

我们设置了 account 路由下面包含两个子路由，分别为 login 路由和 account 路由。

Vue路由(vue-router children)路由嵌套总结

在 Vue 中，Vue 路由(vue-router) 可以通过 children 属性来实现路由的嵌套。