Vue.js 如何在使用API分页时更新浏览器查询字符串？

我想学习在使用分页时浏览Vue frontent的最佳方法。我有Django API后端和VueJs前端。我使用DRF

rest\u framework.pagination.PageNumberPagination

并尝试使用

load more按钮获取
next
链接

<template>
<button v-show="next" @click="getArticles" more >`Load More...`</button>
</template>
<script>
methods: {
    getArticles() {
        return this.$store.dispatch('articles/fetchArticles');
    },
  },
</script>

这种方法在我的导航中效果很好

<router-link :to="{ name: 'articles', query:{} }">Articles</router-link>

文章

如何根据页码更改查询字符串

以下是Django的API视图：

谢谢

<router-link :to="{ name: 'articles', query:{} }">Articles</router-link>