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>

现在，例如，第二页正确具有以下网址：

/company?page=2

如果我单击它，我会转到正确的URL。问题是如何告诉路由器链接，在按下第二页按钮时必须对后端进行另一个调用？我认为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

只想增加与@Ignas Damunskis答案有关的改进，就可以了。

如果您想听创建的更改以及特定属性的更改（在这种情况下为查询参数）

您不需要创建的方法，可以通过watch方法将其全部完成，如下所示：

watch: {
  page: {
    handler: function (val, oldVal) { /* ... */ },
    immediate: true
  }
}

希望它会有所帮助：）

Answer 3

但是我无法在vue-router上使用它

创建父组件时（）{...}

检查if (this.$route.query.order}是否存在

然后将this.viewOrder设置为true，并加载子组件

并将道具传递给子组件

Answer 4

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

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

Answer 5

您也可以通过vue路由的动态匹配来做到这一点：https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

showHeader

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

5 个答案: