vue路由3：子路由

<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/user/王花花">王花花</router-link>
        <router-link to="/user/李双蛋">李双蛋</router-link>
    </div>

    <div>
        <router-view></router-view>
    </div>
</div>

<script src="../lib/vue.js"></script>
<script src="../lib/router.js"></script>
<script src="./js/app.js"></script>

var routes = [
    {
        path: '/',
        component: {
            template: `
                <h2>首页</h2>
            `
        }
    },{
        path: '/about',
        component: {
            template: `
                <h2>关于我们</h2>
            `
        }
    },{
        path: '/user/:name',
        component: {
            template: `
                <div>
                    <h2>我叫：{{$route.params.name}}</h2>
                    <router-link to="more" append>更多</router-link>
                    <router-view></router-view>
                </div>
            `
        },
        children: [
            {
                path: 'more',
                component: {
                    template: `
                        <div>我叫{{$route.params.name}}，核心技术是国之重器！建设网络强国习主席提出新要求</div>
                    `
                }
            }
        ]
    }
];

var router = new VueRouter({
    routes: routes
});

var app = new Vue({
    el: '#app',
    router: router
});