记录一个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: "
我是组件index。。。
"
    };

    var overview = {
        template: "
我是组件about。。。
"
    };

    //创建一个路由对象
    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来进行设置。下面给出代码示例：

{{item.content}}
{{item.content}}
{{item.content}}