文章目錄

• 關于'$ router' 的 undefined問題 ，是不是很痛點？！
• • • 再來看一段本人項目内測的代碼：
    • 第二頁代碼：
    • 重點：
    • • • • 參考閱讀文章：

關于’$ router’ 的 undefined問題 ，是不是很痛點？！

報錯截圖：

在使用

axios

進行跨域請求的時候，我們一般用

this.$router.push(' ')

的方法進行路由跳轉。

看上去沒有任何問題，但是運作會報錯：

不幸的是，雖然遇到了報錯，但是我們仍舊自認為自己寫的沒問題，可是無論怎麼調都解決不了這個bug。

demo : 先來看一下别人贊助的代碼：

再來看一段本人項目内測的代碼：

ajaxWeatherApiTest: function (areaName) {            
      this.$toast(this.areaName);
      var that=this // 放置指針，便于then操作的擷取

      axios.get('http://wthrcdn.etouch.cn/weather_mini', {
          params: {
              citykey: this.areaName
          }
      })
      .then(function (response) {
          console.log(response);
          var reslutData=response;  
          //console.log("你查詢的是:"+reslutData.city+","+reslutData.date+","+"明天的天氣是:"+reslutData.id);
          var str = "你查詢的是:"+reslutData.data.data.ganmao;
          //console.log(str+"citykey"+that.areaName)
          that.reslut=str;
         // var rescode=that.areaName; //擷取輸入的文本（成功之後可以直接将結果'reslutData對象'作為'reslutData傳輸對象'）
          //alert(res);         
          this.$router.push({
            path: '/receData',
            query: {
              reslutData
            }
          });
          
      }.bind(this))
      .catch(function (error) {
          console.log("請求失敗"+error);
      });

    }
           

第二頁代碼：

<template>
  <div class="hello">
    receData
    <h1>接收 ：天氣查詢</h1>
    <van-cell-group>
      <van-field
        v-model="resdata"
        type="textarea"
        placeholder="确定後顯示查詢結果"
        rows="1"
        autosize
        disabled
      />
    </van-cell-group>



  </div>  
</template>

<script>
export default {
  name: "receData",
  data (){
    return{
      resdata: this.$route.query.reslutData.data.data.ganmao
    }
  },
  methods:{

  }
}
</script>

<style>

</style>
           

這樣，兩個頁面的代碼就構成一個完整的可執行的邏輯體系。

重點：

這裡需要對axios請求做一些修改。

在

axios

的請求後面加上

.bind(this)

就可以運作成功了。

參考閱讀文章：

• 關于’$router’ of undefined問題

以上就是關于“ 關于’$ router’ 的 undefined問題 ，是不是很痛點？！ ” 的全部内容。