head代码：

    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/vue/dist/vue.min.js"></script>
　　<!--模块化引用时要Vue.use()，之后再说这个-->
    <script type="text/javascript" src="bower_components/vue-router/dist/vue-router.min.js"></script>

body部分html代码：

<div id="app">
        <!--使用<router-link></router-link>组件来进行导航-->
        <!--douter-link最终会被渲染成一个a标签-->
        <!--来了解一下<router-link>自定义组件的属性，就和其他的自定义组件属性一样，可以用v-bind动态绑定-->
        <!--1.to属性，会调用router.push()-->
        <router-link to="/testcomponent">我是一个小小的路由</router-link>
        <!--2.replace属性，设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。-->
        <router-link to="/testcomponent" replace>我是一个小小的路由</router-link>
        <!--需要渲染的组件会被渲染在<router-view></router-view>组件中-->
        <!--3.append属性，在当前 (相对) 路径前添加其路径。比如我有一个路由已经跳进的百度www.baidu.com，假使百度阅读为www.baidu.com/read可使用append-->
        <div><!--我是append属性的说明-->
            <router-link to="www.baidu.com">我跳转入百度</router-link>
            <!--在百度页面有一个路由-->
            <router-link to="/read" append>我是百度阅读</router-link>
        </div>
        <!--4.tag属性，router默认渲染成a标签，我们若想让它渲染为其他标签，可用tag属性修改-->
        <router-link to="/testcomponent" tag="span">我是一个小小的路由</router-link>
        
        <!--5.active-class属性，默认激活时的状态，从class就知道要绑定某个class，例如我在上面写了一个active-test的class的style-->
        <!--这个在被激活之后就会加上active-test的class-->
        <router-link to="/testcomponent" active-class="active-test">我是一个小小的路由</router-link>
        <!--6.exact-active-class属性，精确匹配，比如上面的百度和百度阅读，使用active-class，触发百度阅读肯定会触发百度，而使用exact-active-class则可以避免这种情况-->
        <!--7.event属性，默认触发事件方法是点击，即click，但是也可以规定其他事件，event="mousehover" 或者event=["mousehover","dbclick"] -->
        <router-view></router-view>
    </div>

script代码：

<script>
        //使用路由时，这么生成的并无法使用，因为下面引用会早于自定义组件的渲染，应该用已经写好的html片段或者引入已生成的自定义组件
    //    Vue.component("testcomponent",{
    //         //template 组件描述
    //         template:'<h1>我是一个新的自定义全局组件</h1>'
    //     });
        var testcomponent = { template: '<h1>我是一个新的自定义全局组件</h1>' } 
        //组件和路由之间的联系需要以path和component的形式来定义
        var routers = [
            { path: '/testcomponent', component: testcomponent }
        ];
        //需要生成router（路由）实例
        //首先这里有一个大坑，vue默认router实例名字是router，如果改成其他的实例名，在vue实例中要用“router:新的实例名”来调用
        var routers = new VueRouter({
            //这里也有一个坑，就是路由定义的变量名默认是routes,如果不是这个名字的话，生成路由实例的时候就要像下面一样的写法。
            routes: routers
        });
        new Vue({
            el:"#app",
            //下面就是那个大坑
            router:routers
        });
    </script>