programing

vue를 사용하여 Axios 응답 후 리디렉션

copyandpastes 2022. 7. 20. 22:51
반응형

vue를 사용하여 Axios 응답 후 리디렉션

좋아요, 다음 방법이 있어요.기본적으로 API 백엔드를 호출하여 사용자 이름과 비밀번호를 게시합니다.이러한 사용자 이름과 패스워드가 통과하면 서버에서 200의 상태를 전송합니다.상태를 확인한 후 if/else를 실행하여 상태가 200이면 수정하고 그렇지 않으면 오류 메시지를 표시합니다.이걸 쓰려고 할 때마다요$125.199/여기에 있는 모든 루트),

오류: 'homepage.vue?3ec6:72 미포함(확실히)TypeError: 정의되지 않은 속성 '$router'를 읽을 수 없습니다.

그러나 method의 상단에서 같은 루트를 사용하면 axios 호출 이외에서는 정상적으로 동작합니다.

내가 뭘 놓쳤지?

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

정의해야 요.this과 같습니다.this성분이 객체를 .

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

★★★★★★★를 사용해 주세요.this.$router.push('/home')

루트명 사용

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

루트 URL 사용

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

Vue Router 매뉴얼

를 사용하면 쉽게 리다이렉트 할 수 있습니다.

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

아니면

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

언급URL : https://stackoverflow.com/questions/48747279/redirect-after-axios-response-with-vue

반응형