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

Question

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

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: {
    page () {
        // call backend
    }
}

还可以考虑在 computed 属性页设置后在 created 事件 Hook 上调用后端(取决于您的需要):

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

如果有什么不清楚或者我误解了你，请随时问更多。