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

Question

我的应用截图如下

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

           <div class="note-list-con" id="note_list_scroll">
                <!--<ul class="notes-list">-->
                <transition-group class="notes-list" name="flip-list" tag="ul">

                    <li v-for="(note,index) in note_list" :key="index" 
                        :data-noteId="note.note_id"
                        @click="selectNote(note.note_id)"
                        :class="{ noteSelected:note.note_id == noteSelectedId }"
                        >
                        <h3>{{ note.title }}</h3>
                        <span>{{ formatDate(note.create_time) }}</span>
                        <transition name="show-con" mode=""
                            v-on:before-enter="showConBeforeEnter"
                            v-on:enter="showConEnter"
                            v-on:leave="showConLeave"
                            v-bind:css="false"
                        >
                            <p v-bind:class="{ pWidthHasImage : note.img_path }" v-if="showCon">{{ note.con }}</p>
                        </transition>
                        <transition name="show-img" mode=""
                            v-on:before-enter="showImgBeforeEnter"
                            v-on:enter="showImgEnter"
                            v-on:leave="showImgLeave"
                            v-bind:css="false"
                        >
                            <img v-if="note.img_path && showImg" :src="note.img_path" />
                        </transition>
                    </li>

                </transition-group>
                <!--</ul>-->
            </div>
            
            

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

const Notebook = {template:
    '<div class="note-list-con" id="note_list_scroll">\
        ...中间省略
    </div>'
}
const Note = {template:'<h1>Bar</h1>'}

const routes = [
    {path: '/notebook', component: Notebook},
    {path: '/note', component: Note}
]

const router = new VueRouter({
    routes
})
            
new Vue({
    el:'#app',
    router,
})

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

Answer 1

v-for的实现和路由没有关系吧？楼主的想法是想实现点击不同按钮显示不同的列表内容。
如果你真的想走路由，那么就是不同路由去寻找不同的模板，这样感觉你想是实现的已经是两个模板了，两个模板的列表就用两个v-for去渲染，互不应影响的。
但是我看你的代码，你是想实现模板公用只是数据不一样，那么可以不走路由啊，点击某个按钮的时候就获取该按钮的数据然后渲染进列表。