<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示路由切换组件</title>
</head>
<body>
    <div id="app">
        <div>
            <router-link to="/">首页</router-link>
            <router-link to="/type/1">新闻</router-link>
            <router-link to="/type/2">娱乐</router-link>
            <router-link to="/about">关于我们</router-link>
            <button @click="change">切换</button>
        </div>

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

        <script src="../js/vue.js"></script>
        <script src="../js/vue-router.js"></script>

        <script>
            let routesObj = [
                {
                    path:'/',
                    component:{
                        template:'<div><h2>首页</h2></div>'
                    }
                },
                {
                    path:'/about',
                    component: {
                        template: '<div><h2>关于我们</h2></div>'
                    }
                },
                {
                    path:'/type/:id',
                    name:'type',
                    component:{
                        template:'<div>' +
                            '<h2>编号已接收{{$route.params.id}}</h2>'+
                            '<router-link to="more" append>显示全部</router-link>'+
                            '<router-view></router-view>'+
                            '</div>'
                    },
                    children:[
                        {
                            path:'more',
                            component:{
                                template:'<div>{{$route.params.id}}的详细信息</div>'
                            }
                        }
                    ]
                }
            ];

            let routerKK = new VueRouter({
                routes:routesObj
            });

            let vm = new Vue({
                el:'#app',
                router:routerKK,
                methods:{
                    change:function () {
                        setTimeout(function () {
                            routerKK.push('/about');
                            setTimeout(function () {
                                routerKK.push({name:'type',params:{id:2}});
                            },2000)
                        },2000)
                    }
                }
            });
        </script>

</body>
</html>