vue.js - 重定向后如何使用vuejs全局事件通知

Question

我创建了一个名为 EvenBus 的全局 vuejs 事件在名为 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!!...')永远不会出现。 代码执行无误。

我是否缺少让我的组件监听发出的事件的东西？

编辑 线路console.log(EvenBus);写在notify.vue文件显示有一个名为“已删除”的事件(参见下面的打印屏幕)

Answer 1

这里的问题是当执行这行代码时，

window.location.href = '/home';

您所在的页面被替换为 /home 页面。因此，它有可能永远不会到达发出事件的行，如果它到达了，则在加载页面时监听事件的对象就消失了。

您可能想研究使用 VueRouter 以免页面被破坏。除此之外，可能会在您重定向时告诉服务器它需要在页面加载时显示通知。