例如,如果你转到分页的第 3 页,然后在浏览器中点击返回,route.query.page 发生了变化,但内容没有改变,如果你只是点击分页,那么一切都很好, url和内容发生变化,点击浏览器后退按钮时如何跟踪url和更改内容?像这样的 url:http://localhost:3000/category/610?page=3 例如,当:-> ?page=3 等于 pageNum 时会发生什么变化
<div class="page"
v-if="filteredProducts.length > 20"
v-for="page in pages"
:key="page"
:class="{'page__selected' : page === pageNum}"
@click="pageClick(page)">
{{ page }}
</div>
data() {
return {
view: true,
productsPerPage: 20,
pageNum: 1,
}}
computed:{
paginatedProducts() {
let from = (this.pageNum - 1) * this.productsPerPage,
to = from + this.productsPerPage;
return this.filteredProducts.slice(from, to);
},
}
methods:{
pageClick(page) {
this.$router.push({
query: {
...this.$route.query,
page: page,
},
})
this.pageNum = page;
},}