리디렉션 후 vuejs 글로벌 이벤트를 사용하여 알림 방법

리디렉션 후 vuejs 글로벌 이벤트를 사용하여 알림 방법

나는 세계적인 vuejs 이벤트를 만들었다.EvenBus라는 파일에.app.js아래와 같이

window.EventBus = new Vue();

데이터베이스에서 사용자를 삭제한 후home페이지와 나는 '라는 이벤트를 내보낸다.deleted다음과 같다:

import {app} from '../app';
export default {
methods: {
    deleteMe: function () {
        axios.delete('/api/persons/' + this.person.id)
        .then(response => {
            window.location.href = '/home';

            EventBus.$emit('deleted', {
                notification_msg: 'This person has been successfully deleted.',
            });
        })
},
}

페이지 홈에, 나는 태그를 삽입했다.<notify></notify>라는 구성 요소에 연결됨notify.vue. 이 구성 요소에는 다음과 같은 스크립트를 추가했다.

import {app} from '../app';
export default {
/* ... */
mounted() {
    let that = this;
    console.log(EventBus);
    EventBus.$on('deleted', function(data){
        alert('person deleted!!' + data.notification_msg);
        that.msg_text = data.notification_msg;
    });
},
}

삭제 시 성공적으로 에 리디렉션됨home페이지, 하지만 거기서 아무 일도 일어나지 않아그alert('person deleted!!...')절대 나타나지 않는다코드는 오류 없이 실행된다.

구성 요소에서 방출된 이벤트를 청취할 수 있는 항목이 누락되었는가?

EDIT 라인console.log(EvenBus);에 쓰여진.notify.vue파일에 'c.f. printscreen(아래 인쇄 화면)이라는 이벤트가 있는 것으로 표시됨

여기서 문제는 이 코드 라인이 실행되면

window.location.href = '/home';

당신이 있는 페이지는 로 대체된다./home페이지. 따라서 이벤트를 내보내는 선까지 도달하지 못할 수도 있고, 그렇게 되면 페이지가 로드되면 이벤트를 청취하는 객체가 사라진다.

페이지가 파괴되지 않도록 VueRouter를 사용하는 방법을 알아보세요.그 외에 리디렉션할 때 페이지가 로드될 때 알림을 표시해야 한다고 서버에 알릴 수 있다.

참조URL: https://stackoverflow.com/questions/44808333/how-to-use-vuejs-global-event-to-notify-after-redirection