文章目录

• 关于'$ 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问题 ，是不是很痛点？！ ” 的全部内容。