使用router-link路由更改时，Vuejs Component不会显示

Question

我正在使用Vuejs创建一个带有WP Rest API的主题。我创建了博客标题的动态路由，并与router-link链接。当我点击标题时，网址会发生变化，但组件未显示。我只是得到一个空白页面。这是我的代码：

index.php

<div class="wrapper"> 
    <div id="app">
        <router-view></router-view>
    </div>
</div>    

<template id="post-list-template">
    <div class="container">
        <div class="post-list">
            <article v-for="post in posts">
                <router-link :to="{name:'post', params:{slug: post.slug}}"><h2>{{ post.title.rendered }}</h2></router-link>
                <p v-html="post.excerpt.rendered"></p>
            </article>
        </div>
    </div>
</template>


<template id="single-post-template">
    <h2>Hello World</h2>
</template>

app.js

 var singlePost= Vue.extend({
    template: '#single-post-template'

});


var router = new VueRouter({
    routes: [
        {path: '/', component: postList},
        {path:'post/:slug', name:'post', component: singlePost}
    ]
});



new Vue({
    el:'#app',
    router: router,
});