时间戳

首页 > 解决方案 > Vue js - 如何使用查询字符串路由请求

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

问题描述

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

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 链接时发出请求，但显然不是..

标签： vuejs2vue-router

解决方案

您可以使用接收查询道具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
}

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

推荐阅读