CODEWITHSUNDEEP
vuejs2axiosvue-router
Josh Winters
Josh Winters

Reputation: 855

redirect after axios response with vue

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);
                     })
                   }

Upvotes: 4

Views: 27435

Answers (4)

Vishal Vaghasiya
Vishal Vaghasiya

Reputation: 2102

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

Upvotes: 3

Sajjad Aljileezi
Sajjad Aljileezi

Reputation: 794

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

Upvotes: 2

Anand Mainali
Anand Mainali

Reputation: 1073

You can use easily redirect it by using, 

.then(data => {  
'this.$router.replace({ name: "home" });
    });

OR,

.then(data => {  
'this.$router.push({ name: "home" });
    });

Upvotes: 0

Vucko
Vucko

Reputation: 20844

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');
      }
    })
  }
}

Upvotes: 18

Related Questions