Не вижу
router-view
. Где он? Должен быть. Надо добавить.
UPD. Глянул остальной код - дичь какая-то.
Должен ли пользователь одновременно видеть компоненты Pagination и Detail? Чё-то сомнительно. Наверное, стоит сделать для pagination отдельный роут, который будет доступен по дефолту (?). А если какая-то его часть (
.header
?) должна быть доступна везде - её можно вынести в компонент App (в котором следует разместить
router-view
).
Компонент Pagination. Почему при создании
router-link
вы в качестве id используете индекс? Вместо
<router-link :to="{ name: 'detail', params: {id: index} }">
должно быть
<router-link :to="{ name: 'detail', params: { id: post.id } }">
Компонент Detail. В шаблоне используется свойство detail, которого нет. Очевидно, опечатка - вместо него должно было использоваться свойство post. Которое, кстати, ни разу не реактивное, создаётся в created. Ну а массив posts - он как изначально был пустым, так таким навсегда и останется, вы его никак не изменяете (да и вообще непонятно, зачем он здесь нужен), так что никаких данных у вас в detail не будет никогда. Наверное, стоит добавить наблюдателя за
$route.params.id
, в котором выполнять запрос на получение данных поста. Выглядеть это может как-то так:
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);
},
},
},