IvanInvanov
@IvanInvanov
Новичок

Почему путь в ссылке меняется и переход по этому адресу не выполняется (Vue-router)?

5cab52e8e6b3f487006244.pngЯ новичок в 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,
}).$mount('#app');


5cab52eeed2ef142017921.pngСкриншот проблемы5cab52ef9ed52238340775.png
  • Вопрос задан
  • 1181 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Не вижу 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);
    },
  },
},
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы