开发者学堂课程【前端自动化构建工具 Webpack：结合 webpack 实现 children 子路由】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/587/detail/8233
结合 webpack 实现 children 子路由
基本内容
一、课前导言
二、vscod 中 vue 的学习插件
三、login.vue
四、register.vue
五、修改路由（main.js )
六、Account.vue
一、课前导言
1、在前面学习中，创建了平齐路由，当点击 Account，将会出现登录和注册两个子组件，这是通过 children 来实现子路由。
2、如果要在点击 Account 之后出现登录和注册两个子组件，那么就需要 创建两个子组件。创建 subcom 的子组件，在 subcom 中创建 login.vue 和 App.vue。
3、在这两个文件夹前面都有一个“V”字型的小图标，还有一些代码片段的小图标，如果没有小图标的话可能就是因为没有安装 vscod 中 vue 的安装包。
二、vscod 中 vue 的学习插件
1、Vetur 0.10.1
Vue tooling for VSCode
Pine Wu
2、Vue 2 Snippets 0.1.5
A Vue.js 2 Extension
hollowtree
安装完成之后,文件前方会有一个“v”字形的图标；
三、login.vue
<template>
<div>
<h3>这是Account的登陆子组件</h3>
</div>
</ template>
<script>
</ script>
<style>
</style>
四、register.vue
<template>
<div>
<h3>这是account的注册子组件</h3>
</div>
</ template>
<script>
</ script>
<style>
</style>
当二和三的程序结束之后，下一步骤就是 修改路由。
五、修改路由（main.js)
首先必须在 Account 界面建立两个子路由；
import Vue from 'vue '
//1. 导入vue-router 包
import vueRouter from 'vue router '
//2. 手动安装VueRouter
Vue . use (VueRouter )
//导入app组件
import app from ‘. /App . vue '
import account from ‘./main/Account.vue’
import goodlist from ‘./main/Goodlist.vue’
//导入Account的两个子组件
import login from ‘./subcom/login.vue’
import register from ‘./subcom/register.vue’
这两个子组件只能单独的放在 Account里面，所以应该在account里面创建两个链接；此处接 “五”。
// 3.创建路由对象
var router = new VueRouter ( {
routes: [
//account goodlist
{
path :‘account’,
component:account //除了path和component这两个之外，还需要再加一个属性。它是一个数组。此时还需要建立一个路由。
Children: [
{path:‘login’, component:login }//子路由前面不能带“/” 如果是login，那么就展示对应的login组件。
{path:’register’,component:register}
]
},
{path :’goodlist’,component:goodlist }
]
} )
var vm = new Vue({
e1: ' #app' ,
render: c => c (app),//render 会把el指定的容器中，所有的内容都清空覆盖，所以不要把路由的router-view和router-link直接写到el所控制的元素中
Router // 4.将路由对象挂载到vm上
} )
六、Account.vue
< template>
<div>
<h1>这是Account组件</h1>
<router-link to="/account/login">登陆</router-link>
<router-link to="/account/register">注册/router-link >
<router-view></router-view >
</ div>
</ template>
<script>
</ script>
<style>
</style>
结论：
只有在 Account 里面才能够显示登录和注册，在 Account 里
面实现路由嵌套，结合 webpack 实现 children 子路由；
