重定向后如何使用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.vue 的组件的标签 <notify></notify>。 在此组件中，我添加了以下脚本：

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); 行显示有一个名为 'deleted' 的事件（下面的 c.f.printscreen）

Answer 1

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

window.location.href = '/home';

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

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