記錄一個router-link和v-for聯合使用的坑

錯誤代碼：

 <div id="app">
      <router-link v-for="item in items" to="'/' + item.id" 
      :key="item.id">{{item.content}}</router-link>
 </div>
 <router-view></router-view>
<script>
    var index = {
        template: "<div>我是組件index。。。</div>"
    };

    var overview = {
        template: "<div>我是組件about。。。</div>"
    };

    //創建一個路由對象
    var routes = [
       {path: '/home', component: index, name: "home"},
        {path: '/overview', component: overview, name: "overview"},
    ];

    //創建實例
    var router0 = new VueRouter({
        routes
    });

    var app = new Vue({
        el: "#app",
        router: router0,
        data: {
            items: [
                {content: '首頁', id: "home"},
                {content: '概述', id: "overview"},
            ]
        }
    });
</script>

結果發現router-view並沒有渲染。並且我發現把router-link裏面的to寫死，即to="/home"或者to="/overview"就能夠渲染，但這並不是我想得到的效果。查閱官方文檔後得到解決方案。
首先，我們需要把to改成:to即v-bind:to的縮寫，然後可以根據path或name來進行設置。下面給出代碼示例：

<router-link v-for="item in items" :to="{path: '/' + item.id}" 
      :key="item.id">{{item.content}}</router-link>
<router-link v-for="item in items" :to="{path: item.id}" 
      :key="item.id">{{item.content}}</router-link>
<router-link v-for="item in items" :to="{name: item.id}" 
      :key="item.id">{{item.content}}</router-link>