<div id="app">
        <span>
            <router-link to="/home">home</router-link>
        </span>
        <span>
            <router-link to="/news">news</router-link>
        </span>
        <router-view></router-view>
    </div>

    <template id="home">
        <div>home</div>
    </template>

    <template id="news">
        <div>
            <!-- news進入詳情頁面彤敛，并且傳入當前被點擊新聞的id -->
            <ul>
                <li>
                    <router-link to="/news/0">新聞1</router-link>
                </li>
                <li>
                    <router-link to="/news/1">新聞2</router-link>
                </li>
                <li>
                    <router-link to="/news/2">新聞3</router-link>
                </li>
                <li>
                    <router-link to="/news/3">新聞4</router-link>
                </li>
            </ul>
        </div>
    </template>


    <template id="detail">
        <div>
            <h1>新聞詳情</h1>
            <div>接收過來的新聞：{{newsArr[$route.params.id].con}}</div>
            <!-- $route接收參數(shù)贝咙，在template中接收 -->
        </div>
    </template>


    <script>
        var Home = Vue.extend({
            template: '#home'
        });
        var News = Vue.extend({
            template: '#news'
        })


        var Detail = Vue.extend({
            'template': '#detail',
            data: function () {
                return {
                    newsArr: [{
                            id: 001,
                            con: '新聞1'
                        },
                        {
                            id: 002,
                            con: '新聞2'
                        },
                        {
                            id: 003,
                            con: '新聞3'
                        },
                        {
                            id: 004,
                            con: '新聞4'
                        }
                    ]
                }
            }
        });

        var arr = [{
                path: '/home',
                component: Home
            },
            {
                path: '/news',
                component: News
            },
            {
                path: '/news/:id',
                component: Detail
            }
        ];

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

        var vm = new Vue({
            'el': '#app',
            router,
            beforeCreate:function(){
                this.$router.push('/');
            }
        });
    </script>