<!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?search=虾米大王">娱乐</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}},{{$route.query.search}}可以从后台访问数据</h2></div>'
                }
            },
        ];

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

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

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