準備工作:
- 和風天氣api接口的key(和風天氣網址:https://www.heweather.com/)(注冊賬號-控制臺-添加key)
2.安裝axIOS依賴,npm install axios --save
3.路由index.js配置
<template>
<div>
<h1>天氣</h1>
<p>城市:{{city}}</p>
<p>溫度:{{wendu}}</p>
<p>風力:{{feng}}</p>
</div>
</template>
<script>
import axios from 'axios'
export default{
data() {
return {
city:null,
wendu:null,
feng:null
}
},
beforeMount() {
let httpUrl=`https://free-api.heweather.net/s6/weather/now?location=${this.$route.params.city}&key=和風天氣中key`;
//因為get中寫反引號會報錯,所以我們就單獨定一個變量,把${路由}傳進去
axios.get(httpUrl)
.then(res=>{
console.log(res.data) //查看返回數據的結構和所需的鍵值
let info=res.data.HeWeather6[0];
this.city=info.basic.location;
this.wendu=info.now.tmp;
this.feng=info.now.wind_sc;
}).then((err)=>{
console.log(err)
})
},
}
</script>