redirect after axios response with vue - vuejs2

Question

Ok, so i have the following method. Basically I am calling an API backend, posting username and password, and if those pass, in the response, the server sends me a 200 status. What I want to do, is in the response, after I get the status, run an if/else, so if the status is 200, redirect, else display an error message. every time i try to use 'this.$router.push('/any route here')',
I get an error: 'homepage.vue?3ec6:72 Uncaught (in promise) TypeError: Cannot read property '$router' of undefined'.
But if i use the same route at the top of the method, outside the axios call, it works fine.
So what am i missing here?
hero_login: function(event){
event.preventDefault();
axios.post('API call here',
{
service:'client',
user: this.user_email,
password: this.user_password,
json:true
})
.then(function(response){
const status =
JSON.parse(response.data.response.status);
console.log(status);
})
}

Answer 1

You have to define this outside axios methods because this inside axios refers to the axios object, not the vue component:
hero_login: function(event) {
let self = this;
event.preventDefault();
axios.post('API call here',
{
service:'client',
user: this.user_email,
password: this.user_password,
json:true
})
.then(function(response){
const status =
JSON.parse(response.data.response.status);
//redirect logic
if (status == '200') {
self.$router.push('/any route here');
}
})
}
}

Answer 2

Use route name
this.$router.push({name: 'home'});
this.$router.replace({name: 'home'});
Use route URL
this.$router.push('/home');
this.$router.replace('/home');
Such as Vue Router Documentation

Answer 3

please use this.$router.push('/home')

Answer 4

You can use easily redirect it by using,
.then(data => {
'this.$router.replace({ name: "home" });
});
OR,
.then(data => {
'this.$router.push({ name: "home" });
});