<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循环动态跳转：