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

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

            // 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>

        <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>

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