<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

});