如何在 nuxtjs 中访问查询字符串并将其传递给数据

Question

我想从 nuxtjs 页面中的 url 访问查询字符串。这是包含查询字符串 -

的页面 url

http://localhost:3000/en-IN/atrsps/results/?pickupairport=Dubai&dropoffpoint=Bur%20Dubai,%20DU,%20United%20Arab%20Emirates&pickupdate=06%2F06%2F2021%2013%3A27

这是我的页面脚本部分

<script>
import axios from 'axios'
export default {
  data() {
    return {
      cars: [],
      loading: false,
      disabled: true,
      pickupairport: null,
      dropoffpoint: null
    }
  },
  asyncData({ route }) {
      console.log(route.query)
  },
  computed: {
    url() {
      return `https://api.testdomain.com/V2/transfers/carlist?startpoint=${this.pickupairport}&endpoint=${this.dropoffpoint}&pickupdate=2021-07-01&pickuptime=14:55`
    },
  },
  
  async created() {
    await this.fetchData()
  },

  methods: {
    async fetchData() {
      this.loading = true //the loading begin
      const res = await axios.get(this.url)
      this.cars = res.data.response
      this.loading = false
    },
    carsearch($state) {
      setTimeout(() => {
        axios
          .get(this.url)
          .then((res) => {
            if (res.data.response.length > 1) {
              res.data.response.forEach((item) => this.cars.push(item))
              $state.loaded()
            } else {
              $state.complete()
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }, 1000)

    },
  },
}
</script>

我想将 pickupairport 和 dropoffpoint 值从 url 传递到数据中的 pickupairport 和 dropoffpoint。

在控制台中，我可以看到这个数据

 {                                                                                                                                                 
  pickupairport: 'Dubai',
  dropoffpoint: 'Bur Dubai, DU, United Arab Emirates',
  pickupdate: '06/06/2021 13:27'
}

Answer 1

从模板中，您可以从 $route 对象访问它，例如 $route.query，并且从 vue 实例中，您可以编写 this.$route.query

您还可以从 vue 开发工具中检查 $route 对象。看看下面的图片：

要将查询传递给数据对象，您只需编写：

data() {
  return {
    pickupairport: this.$route.query.pickupairport,
  }
}

但您可能不需要将查询存储在数据对象中，因为您可以从模板或脚本中的任何地方访问 $route 对象

如何在 nuxtjs 中访问查询字符串并将其传递给数据

How to access query string in nuxtjs and pass it to data

vue.js

nuxtjs