Vue js - 如何使用查询字符串路由请求

Question

我有一个以这种方式制作的路由器视图对象

export default new Router({
  linkExactActiveClass: 'active', // active class for *exact* links.
  mode: 'history',
  routes: [
    {
      path: '/admin',
      name: 'dashboard',
      component: Dashboard
    },
    {
      path: '/company',
      name: 'company',
      component: ObjectList,
      props: {
        url: '/web/company',
        idColumn: 'companyId'
      }
    }
  ]
})

当我点击 /company 链接时，路由器正确地将我发送到ObjectList组件

在这个页面中，我有一个以这种方式制作的简单分页组件

<template>
  <div class="overflow-auto">
    <b-pagination-nav
      align="center"
      :link-gen="linkGen"
      :number-of-pages="totalPages"
      use-router
    ></b-pagination-nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  name: "pagination",
  props: {
    current: Number,
    url: String,
    totalPages: Number
  },
  methods: {
    linkGen(pageNum) {

      return pageNum === 1 ? "?" : `?page=${pageNum}`;
    }
  }
};
</script>

现在，例如，第二页正确地具有以下 url：

/company?page=2

如果我点击它，我会转到正确的网址。问题是如何告诉路由器链接在按下第二个页面按钮时必须对后端进行另一个调用？我认为该use-router选项应该捕获此链接并在我单击标准导航栏中的 /company 链接时发出请求，但显然不是..

Answer 1

您可以使用接收查询道具 this.$route.query

您应该定义计算道具以接收：

computed: {
  page () {
    return this.$route.query.page || 1
  }
}

现在您可以使用watch此属性并在每次更改时调用后端：

watch: {
    page () {
        // call backend
    }
}

还可以考虑在设置属性页后在created事件挂钩上调用后端computed（取决于您的需要）：

created () {
    // call backend by passing this.page
}

如果有不清楚的地方或者我误解了你，请随时询问更多。

Answer 2

您还可以使用这段代码处理每个 url 查询参数更改：

watch: {
        '$route.query': {
            immediate: true,
            handler(newVal) {
                console.log(newVal)
                // make actions with newVal.page
            }
        }
    }