如何获取 Vuejs 中 axios 调用的查询参数？

Question

HelloWorld.vue

import axios from "axios";
export const deploymentattribute = ({ serv, id }) =>
  axios.get( api cal here .................
    
  );

<template>
  <div>
    <div v-for="(attribute, index) in attributes" :key="index">
      {{ attribute.att }}
    </div>
  </div>
</template> 

<script>
import { deploymentattribute } from "./deploymentattribute";
export default {
  name: "DeploymentAttributeView",
  data() {
    return {
      attributes: [],
    };
  },
  async mounted() {
    const response = await deploymentattribute({
      servicetype: this.$route.query.ser,
      id: this.$route.query.id,
    });
    this.attributes = response.data;
  },
};
</script>

上面的代码有问题，我无法动态获取查询字符串参数。获得 undefined

有没有办法动态传递它们？

Answer 1

通过以下方式获取参数 ID：

let urlParams = new URLSearchParams(window.location.search);
const id = urlParams.id;

或

 const id = this.$route.query.id;

然后使用模板文字而不是引号来使用字符串中的变量值：

export const deploymentattribute = ({ servicetype, id }) =>
 

  axios.get(`http://example.com/servicedetail/?servicetype=. {servicetype}&id=${id}`);

 );

Answer 2

你应该

import axios from "axios";
export const deploymentattribute = ({ servicetype, id }) =>
  axios.get(
    `http://10.11.12.13:3000/servicedetail/?servicetype=${servicetype}&id=${id}`
  );

和

<template>
  <div>
    <div v-for="(attribute, index) in attributes" :key="index">
      {{ attribute.attribute }}
      {{ attribute.value }}
    </div>
  </div>
</template> 

<script>
import { deploymentattribute } from './deploymentattribute'
export default {
  name: "DeploymentAttributeView",
  data() {
    return {
      attributes: [],
    };
  },
  async mounted() {
    const response = await deploymentattribute({ servicetype: this.$route.query.servicetype, id: this.$route.query.id })
    this.attributes = response.data
  },
};
</script>

因为默认情况下 js 文件中没有 this 上下文。

如何获取 Vuejs 中 axios 调用的查询参数？

How to get the query params for the axios call in Vuejs?

javascript

vue.js

axios

vuejs2