Question

好的，我有以下方法。基本上我正在调用API后端，发布用户名和密码，如果这些通过，在响应中，服务器发送给我200状态。我想做的是，在响应中，在我获得状态后，运行if / else，所以如果状态为200，则重定向，否则显示错误消息。每次我尝试使用'this。$ router.push（'/ any route here'）'，

我收到错误：'homepage.vue？3ec6：72 Uncaught（in promise）TypeError：无法读取undefined'的属性'$ router'。

但是如果我在方法的顶部使用相同的路线，在axios调用之外，它可以正常工作。

那么我在这里缺少什么？

{{1}}

Answer 1

你必须在axios方法之外定义this，因为axios中的this指的是axios对象，而不是vue组件：

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

您可以使用

轻松地将其重定向

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

OR ，

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

Answer 3

请使用this.$router.push('/home')

Answer 4

使用路线名称

this.$router.push({name: 'home'});

this.$router.replace({name: 'home'});

使用路线URL

this.$router.push('/home');

this.$router.replace('/home');

例如Vue Router Documentation

在使用vue进行axios响应后重定向

4 个答案:

使用路线名称

使用路线URL