vue router html模板,vue-router如何在模版中使用v-for

我的应用截图如下

点击蓝色框的按钮需要右边显示右边红框，点击黄色框按钮右边加载另外的内容，但是我的红色框里的列表是用v-for渲染的，代码如下

:data-noteId="note.note_id"

@click="selectNote(note.note_id)"

:class="{ noteSelected:note.note_id == noteSelectedId }"

>

{{ note.title }}

{{ formatDate(note.create_time) }}

v-on:before-enter="showConBeforeEnter"

v-on:enter="showConEnter"

v-on:leave="showConLeave"

v-bind:css="false"

>

{{ note.con }}

v-on:before-enter="showImgBeforeEnter"

v-on:enter="showImgEnter"

v-on:leave="showImgLeave"

v-bind:css="false"

>

然后我把这段html写在模版里貌似就有问题

const Notebook = {template:

'

\

...中间省略

'

}

const Note = {template:'

Bar

'}

const routes = [

{path: '/notebook', component: Notebook},

{path: '/note', component: Note}

]

const router = new VueRouter({

routes

})

new Vue({

el:'#app',

router,

})

请问这种html中用到了v-for渲染列表的情况如何使用路由？