У меня на главной странице делается вывод постов и снизу пагинация, при переходе на другую страницу контент не обновляется хотя ссылка изменилась, только после того как я нажму 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>
