<!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>
        </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',
                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 routerK = new VueRouter({
            routes:routesObj
        });

        let vm = new Vue({
            el:'#app',
            router:routerK
        });

    </script>
</body>
</html>