Why does the path in the link change and the navigation to this address is not performed (Vue-router)?

Question

Vue.js

I am new to Vue JS. And my task is to take the data from the API, make the pagination and when you click on any post, so that a new page opens with more details about the post. I did the pagination but I can't make the transition. When you click on a post, the link changes, but the transition is not performed. Why does the path in the link change and the transition to this address is not performed?
My project on GitHub

Main page code:

<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>

Page code for transition:

<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 code:

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,
}).$mount('#app');

Screenshot of the problem

Answer 1

I don't see router-view. Where is he? It should be. We must add.
UPD. I looked at the rest of the code - some kind of game.
Should the user see the Pagination and Detail components at the same time? Something is doubtful. Probably, it is worth making a separate route for pagination, which will be available by default (?). And if some part of it ( .header?) should be available everywhere - it can be moved to the App component (in which it should be placed router-view).
Pagination component. Why do router-linkyou use an index as id when creating? Instead of

<router-link :to="{ name: 'detail', params: {id: index} }">

should be

<router-link :to="{ name: 'detail', params: { id: post.id } }">

Detail component. The template uses the detail property, which does not exist. Obviously a typo - the post property should have been used instead. Which, by the way, is never reactive, is created in created. Well, as for the posts array, it was empty as it was originally, and it will remain so forever, you don’t change it in any way (and it’s generally not clear why it is needed here), so you will never have any data in detail. Probably, it is worth adding an observer for $route.params.id, in which to execute a request to receive post data. It might look something like this:

data: () => ({
  post: null,
}),
watch: {
  '$route.params.id': {
    immediate: true,
    handler(id) {
      axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`).then(r => this.post = r.data);
    },
  },
},