head代码：

    <div id="app">
        <!--基本写法-->
        <router-link to="/router1">我是一个小小的路由1</router-link>
        <br/>
        <!--写法2-->
        <router-link :to="r1">我是一个小小的路由2</router-link>
        <br/>
        <!--写法3-->
        <router-link :to="{path:'/router1'}">我是一个小小的路由3</router-link>
        <br/>
        <!--写法4,定义name,这里的name是从定义router时设置的-->
        <router-link :to="{name:'rut2'}">我是一个小小的路由4</router-link>
        <br/>
        <!--写法5，带有参数，根据下面这样的写法，那下面name=tut4的path就变成了/router2/sss/123-->
        <router-link :to="{name:'rut4'，params:{id:sss,password:123}}">我是一个小小的路由5</router-link>
        <br/>
        <!--写法6，带有请求参数，，根据下面这样的写法，那下面name=tut4的path就变成了/router2?id=sss&password=123-->
        <router-link :to="{name:'rut5'query:{id:sss,password:123}}">我是一个小小的路由6</router-link>
        
        <!--在一个页面上多个router-view组件展示指定内容的话，需要根据name属性来指定，不过不是router里面设置的name-->
        <!--而是components:{}下的组件html片段所对应的key值，这地方网上很多代码不贴全，让人费解-->
        <router-view></router-view>
        <router-view name="ruter3"></router-view>
        <router-view name="newtestcomponent2"></router-view>          
    </div>

script部分：

    <script>
        var newtestcomponent = {template:'<div>我是一个小小的路由渲染的组件</div>'};
        var newtestcomponent2 = {template:'<div>我也是一个小小的路由渲染的组件</div>'};
        var router = [
            {name:'rut1',path:"/router1",component:newtestcomponent},
            {name:'rut2',path:"/router2",component:newtestcomponent2},
            {name:'rut4',path:"/router2/:id/:password",component:newtestcomponent2},
            {name:'rut5',path:"/router2",component:newtestcomponent2},
            {name:'rut3',path:"/router2",components:{
                ruter3:newtestcomponent
            }}
        ];
        var routers = new VueRouter({
            routes: router
        });
        new Vue({
            el:"#app",
            data:{
                r1:"/router1"
            },
            router:routers
        });
    </script>