开发者学堂课程【Vue.js 入门与实战：路由-使用 children 属性实现路由嵌套】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8199
路由-使用 children 属性实现路
内容介绍：
一、路由的嵌套
二、功能实现
本节主要学习路由的嵌套，通过之前的学习设置后，不管是登录还是注册组件，这两个路由是平级的。两个路由下面都没有其他链接，如果有其他链接的话，那么注册就是一个组件，注册下面的链接是子组件，这就是路由嵌套，下面会主要讲解：
一、路由的嵌套
<body>
<div id="app"></div>
<template id="tmp1">
</div>
<h1>这是Account组件/h1>
</div>
</ template>
1.导入路由模块
<meta name ="viewport" content="width=device -width, initial - scale = 1.0">
<meta http-equiv="X -UA-Compatible” content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src=”./”lib/vue-router-3.0.1.js></script>
2.制作路由模块
//组件的模板对象
var account={
template: ' #tmpl'
}
Var router=new vueRouter（{
Routes：[
{
{ path=‘/’,component:account}
]
})
接下来把 router 挂载到 vm 上
Var Vm =new Vue ({
E1:‘# app‘，
data: {}
methods: {},
router
}) ;
<router-view></router-view>
<router-link to =”/account”>account</router-link>
此时右键浏览，展示结果如下：
3.制作登录注册按钮
用户账户下面，如果想要设置，用户的登录和注册，需要如下代码实现：
<template id="tmp1">
</div>
<h1>这是Account组件/h1>
<router-link to=”/login”>登录</router-link>
<router-link to=”/register”>注册</router-link>
</div>
</ template>
<script>
当前登录和注册属于 account 组件，也就是说，如果没有 account 组件，登录和注册是不可以被显示出来的。此时，点击登录，会显示 /login ，点击注册，会显示 /register 这是不合理的，因为这两个超链接属于 account 组件，在一进来的时候，应该展示根路径。
此时应该把代码改成：
<template id="tmp1">
</div>
<h1>这是Account组件/h1>
<router-link to=”/account /login”>登录</router-link>
<router-link to=”/account /register”>注册</router-link>
</div>
</ template>
<script>
此时再执行，页面会显示：
二、实现功能
因为我们的这个没有监听，所以要把路由监听一下。
因为根路径并没有被监听，所以首页上面不显示任何组件，监听后才能显示 account 组件，当点击 account 的时候会跳转会 account下面。当点击登录的时候它路径是在 account/login 下面的，网页显示的是 account 按钮和登录的组件。当页面时这种的时候是不合理的，因为点击登录之后起前面是要显示 account 下的组件，但是它点击登录之后这些组件就没有了，所以这种方法是不好的。
在 router 下面加上 router-vue 看是不是可以，但是它是不可以的，因为它没有被调用。所以不能这样写，因为 account 与 login上面的 account 是平级的。其实登陆注册都是它的子路由，要把这两个代码
{ path: ' /account/ login' , component: login } ,
{ path: ，/account/ register'，component: register }
改为这个代码
children: [{ path: ' login'，component: login } ,{ path:’rlegisttter', component: register }]，
在 register 前面是没有加路由的。
网页：
这样就实现了我们的子路由嵌套，如果加上 / ，在点击登陆注册的时候是没有东西在网页里面的，在匹配登陆注册的时候都是以 / 目录来匹配的。所以为了实现功能要在path 的 account 前面加上 / ，这样就行了。
使用 children 属性，实现子路由，同时，注意：子路由的 path 前面,不要带 /, 否则永远以根路径开始请求，这样不方便我们用户去理解 URL 地址。
