반응형
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');
를 사용하면 쉽게 리다이렉트 할 수 있습니다.
.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
반응형
'programing' 카테고리의 다른 글
vue에서 상태 항목을 채우는 방법 (0) | 2022.07.20 |
---|---|
1개의 스위치 케이스 스테이트먼트에 2개의 값 사용 (0) | 2022.07.20 |
Nuxtjs: Vue 패키지 버전이 일치하지 않음: vue@3.2.22 및 vue-server-renderer@2.6.14 (0) | 2022.07.20 |
printStackTrace를 문자열에 저장하는 방법 (0) | 2022.07.20 |
버튼이나 링크 없이 페이지 로드 시 Bootstrap-vue 모드를 트리거하려면 어떻게 해야 합니까? (0) | 2022.07.20 |