重定向后如何使用vuejs全局事件通知

Question

我在一个名为 app.js 的文件中创建了一个名为 EvenBus 的全局 vuejs 事件，如下所示：

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!!...') 永远不会出现。 代码执行没有错误。

我是否遗漏了一些东西来让我的组件监听发出的事件？

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

Answer 1

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

window.location.href = '/home';

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

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