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

【问题标题】：Vue js - How to route requests with query stringVue js - 如何使用查询字符串路由请求
【发布时间】：2019-04-08 15:05:26
【问题描述】：

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

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 链接时一样，但显然不是......

【问题讨论】：

标签： vuejs2 vue-router

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

你应该定义计算的 prop 来接收：

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

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

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

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

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

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

【讨论】：

感谢 Ignas，现在很清楚了，我需要查看计算属性，但我需要在父组件中使用它，因为我的分页是子组件，但我可以通过您的回答完成它

【解决方案3】：

只想添加与@Ignas Damunskis 答案相关的改进。

如果您想在创建时监听更改以及特定属性何时更改（在本例中为查询参数）

你不需要创建的方法，你可以在watch方法上一并完成，如下所示：

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

希望对你有帮助:)

【讨论】：

【解决方案4】：

然而，我无法使用 vue-router 实现此功能

创建父组件时() {...}

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

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

并将 props 传递给子组件

【讨论】：

【解决方案5】：

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

  created () {
    // call backend
  },
  watch: {
    $route(to, from) {
    // call backend with (to.params.xxxx)
    }
  }

【讨论】：