Question

我尝试在Nuxt Js项目中进行分页，因此，如何在当前路由中仅更改页面查询参数，并在其中保留其他查询参数的值我有3个查询参数：

      this.count = this.$route.query.count ?? 8
      this.page = this.$route.query.page ?? 1
      this.sort_by = this.$route.query.sort_by ?? 'latest'

  <li class="pagination-link" v-for="(page, key) in computed.lastPage" :key="key"
        :class="{ 'active': page === computed.currentPage }">
      <nuxt-link :to="'?page='+page" append
                 :class="{'current-link' : computed.currentPage === page}">
        {{ page }}
      </nuxt-link>
    </li>

Answer 1

您最好的朋友-destructuring assignment。 JavaScript docs。

以下是在您的情况下如何使用它的示例：

let query = this.$route.query;
let newPage = 100;
this.$route.query = {...query, page: newPage};

没有任何其他变量，它将看起来更加干净：

this.$route.query = {...$this.route.query, page: 100};

执行代码后，您将拥有query，并将page参数覆盖为100，其余的未修改的参数。

Answer 2

试试下面的方法

this.$router.push({path: this.$route.path, query: { ...this.$route.query, foo: 'bar' }})

如何仅更改当前路由vue-router中的特定查询参数？

2 个答案: