vue-router中router-link屬性和寫法

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>