При переходе на другой url конент не обновляется. Как решить?

Question

[valexeich]

У меня на главной странице делается вывод постов и снизу пагинация, при переходе на другую страницу контент не обновляется хотя ссылка изменилась, только после того как я нажму f5 появляются данные которые относятся к этой странице.

Нажимаю на вторую страницу:


Ссылка изменилась но данные не обновились:


Только после того как перезагружу страницу они обновляются:


Вот код:

App.vue:

<template>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <my-header></my-header>
  <slider></slider>
  <router-view></router-view>
  <my-footer></my-footer>
</template>


<script>
import MyHeader from "@/components/Header";
import MyFooter from "@/components/Footer";
import Slider from "@/components/Slider";
export default {
  components: {
    MyFooter,
    MyHeader,
    Slider,
  }
}
</script>

Index.vue:

template>
  <cards :posts="posts"></cards>
  <pagination
      :previous="previous"
      :total="total"
      :current_page="current_page"
      :next="next"
  />
  <br>
</template>

<script>
import Cards from "@/components/Cards";
import Pagination from "@/components/Pagination";
import axios from 'axios'
export default {
components: {
    Cards,
    Pagination
  },
  data() {
    return {
      posts: [],
      total: [],
      next: [],
      previous: [],
      current_page: 0,
    }
  },
  methods: {
    async fetchPosts() {
        let page = this.$route.query.page !== undefined ? `?page=${this.$route.query.page}` : '';
        const response = await axios.get(`http://127.0.0.1:8000/api/post/list/${page}`);
        let next = response.data.next !== null ? response.data.next.split('/')[6] : null;
        let previous = response.data.previous !== null ? response.data.previous.split('/')[6] : null;
        let current_page = this.$route.query.page
        this.posts = response.data.results;
        this.total = Math.ceil(response.data.count / 6);
        this.next = next
        this.previous = previous
        this.current_page = Number(current_page)
    }
  },
  mounted() {
    this.fetchPosts()
  },
}
</script>

Pagination.vue:

<template>
<nav aria-label="Paginate me">
  <ul class="pagination justify-content-center">
    <router-link v-if="previous != null" class="page-link" :to="previous" tabindex="-1">Предыдущая</router-link>
    <li v-else class="page-item disabled">
      <a class="page-link disabled" href="#" tabindex="-1">Предыдущая</a>
    </li>
    <span v-for="i in total">
      <li  v-if="current_page === i || ($route.query.page === '/' && i === 1)" class="page-item active">
        <router-link class="page-link" :to="`?page=${i}`">{{i}}</router-link></li>
      <li v-else class="page-item">
        <router-link class="page-link" :to="`?page=${i}`">{{i}}</router-link></li>
    </span>
    <router-link v-if="next != null" class="page-link" :to="next">Следующая</router-link>
    <li v-else class="page-item disabled">
      <a class="page-link" href="#">Следующая</a>
    </li>
  </ul>
</nav>
<br>
</template>

<script>
export default {
  name: "pagination",
  props: ['previous', 'total', 'current_page', 'next']
}
</script>

Answer 1

[0xD34F]

Вместо

mounted() {
  this.fetchPosts()
},

пусть будет

watch: {
  '$route.query.page': {
    immediate: true,
    handler: 'fetchPosts',
  },
},

Comments

[Николай]

Мне кажется, тут вотчер будет лишним
можно повесить @click и в методе делать router.push и так же emit, такое решение может быть масштабированным, если потребуется передавать еще какие-то доп параметры или информацию из компонента пагинации

Answer 2

[Николай]

У вас fetchPosts запускается только при монтировании компонента, но далее у вас не работает обновление,
Вам надо получить emit об изменении страницы и заново запустить запрос с переданной новой страницей,
Когда вы нажимаете f5, у вас полностью перезапускается приложение и берется номер страницы из роутера