主页 / 问题 / 1186484
Accepted
Alexander
Asked:2020-10-06 01:40:13 +0000 UTC2020-10-06 01:40:13 +0000 UTC

route.query.page 更改时如何更改数据？

  • 772

例如，如果你转到分页的第 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;
    },}
vue.js

1 个回答

  1. Best Answer

    用于watch跟踪page从的变化$route.query，让我们这样说：

    watch: {
    async "$route.query.page"() {
      this.pageNum = this.$route.query.page || 1;
    },
  },

    并且已经有一个依赖$route.query.page属性来pageNum组织构建分页的逻辑。

    了解有关观察者方法的更多信息

    在行动中使用上述信息的示例： https ://codesandbox.io/s/query-params-forked-9ieun

    • 1

相关问题