我是Vue JS的新手。我的任务是从api获取数据，进行分页以及单击任何帖子时，以便打开一个新页面，其中包含有关该帖子的更多详细信息。我进行了分页，但无法进行过渡。单击帖子时，链接会更改，但不会执行过渡。
我的主要代码：
<template>
<div id="app">
<ul>
<li v-for="(post, index) of paginatedData" class="post">
<router-link :to="{ name: 'detail', params: {id: index} }">
<img src="src/assets/nature.jpg">
<p class="boldText"> {{ post.title }}</p>
</router-link>
<p> {{ post.body }}</p>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
el: "#app",
data () {
return {
current: null,
page: 0,
posts: [],
}
},
created(){
this.getData()
},
methods: {
setCurrent: function(id) {
this.current = id;
},
getData() {
axios.get(`https://jsonplaceholder.typicode.com/posts`).then(response => {
this.posts = response.data
})
},
}
}
</script>
我的详细信息页面：
<template>
<div class="post" v-if="detail">
<img src="src/assets/nature.jpg">
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
</div>
</template>
<script>
module.exports = {
data: function() {
return {
posts: [],
}
},
created: function() {
var postId = this.$route.params.id
this.post = this.posts[postId]
}
}
</script>
我的main.js：
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
var Detail = require('./Detail.vue')
Vue.use(VueRouter)
var router = new VueRouter({
routes: [
{path: 'detail/:id', name: 'detail', component: Detail }
]
})
new Vue({
el: '#app',
render: h => h(App),
router: router,
})