2021 vue接入天气情况api

<template>
    <div>
        <h2>天气:{
     {
     weather}}</h2>
        <h3>城市：{
     {
     city}}</h3>
        <h4>温度：{
     {
     tem}}</h4>
        <h5>风向：{
     {
     winddir}}</h5>
    </div>
</template>

<script>
import axios from 'axios'
export default {
     
  data() {
     
    return {
     
        city:null,
        weather :null,
        tem:null,
        winddir: null
    }
  },
  async beforeMount () {
     
  //key去到https://dev.qweather.com/docs/api/weather/weather-now/申请
    let key = '你的key';
    let httpurl = `https://free-api.heweather.net/s6/weather/now?location=${
     this.$route.params.city}&key=${
     key}`;
    let res = await axios.get(httpurl)
    this.city = res.data.HeWeather6[0].basic.location;
    this.weather =res.data.HeWeather6[0].now.cond_txt;
    this.tem= res.data.HeWeather6[0].now.tmp;
    this.winddir =res.data.HeWeather6[0].now.wind_dir;
    console.log(res)
  }
}
</script>

vue循环动态跳转：