在Vue中使用Axios将查询参数传递到URL的最佳方法？

Question

我想要完成的是页面首次加载时，我将使用Axios使用基本URL来拉回JSON对象。然后，我想在单击按钮时将查询参数添加到基本URL。因此，如果单击按钮时基本URL是“ test.com”，则将向URL添加查询参数，并且Axios将再次运行以拉回另一个JSON对象。因此，URL可能类似于“ test.com?posttype=new”。

我目前正在做的是使用基本URL在create run Axios上运行，并在单击按钮时运行再次运行Axios的方法，但这一次它将查询参数添加到URL，因此在Vue中如下所示：

 created () {

    axios
      .get(this.jobsListURL)
      .then(response => (this.jobsList = response.data.data))
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)

    },

  methods: {
    getJobs: function () {

    axios
      .get(this.jobsListURL + '?' + this.AxiosParams)
      .then(response => (this.jobsList = response.data.data))

      .catch(error => {
        console.log(error)
        this.errored = true
      })

      .finally(() => this.loading = false)
  },

因此，在上面的示例中，jobsListURL是JSON对象的基本URL，而AxiosParams是我要在单击按钮时将参数添加到URL的方法。因此，单击该按钮时，它将运行getJobs方法以使用带有参数的URL重新运行Axios。我不确定这是否是最佳方法，或者是否有更好的方法将查询参数添加到URL并以此方式获取新的JSON对象。

在我走这条路之前，只是想寻找一些反馈，看看是否有更好的方法？

Answer 1

.get如果要传递对象，可以使用第二个参数：

axios.get(this.jobsListURL, {
  params: this.axiosParams
})

这几乎是相同的，但是您不必对URL进行字符串操作。

您可以像这样构建该对象：

computed: {
    axiosParams() {
        const params = new URLSearchParams();
        params.append('param1', 'value1');
        params.append('param2', 'value2');
        return params;
    }
}