版权声明:本文为博主原创文章,允许转载,但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/87937202
关于’$ 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’ 的 undefined问题 ,是不是很痛点?! ” 的全部内容。