vue.js - Vuejs 'beforeunload' 事件未按预期触发

Question

我已经在 vue 路由器路由使用的组件的创建钩子(Hook)上注册了 'beforeunload' 事件。

我想调用此事件处理程序，以便在浏览器选项卡关闭、浏览器选项卡刷新或浏览器关闭时删除用户。

在组件A上

created (){    
    window.addEventListener('beforeunload', () => {

        this.removeUser()

        return null
     })
}

Smilarly 在 ComponentB 上

created (){    
    window.addEventListener('beforeunload', () => {

        this.removeUser()

        return null
     })
}

还有我的 router.js

{
  path: '/staff/call/:session_key',
  name: 'Staff Call',
  component: ComponentA,
  meta: {auth: true}
},
{
  path: '/consumer/call/:session_key',
  name: 'Consumer Call',
  component: ComponentB
},

此处“beforeunload”事件处理程序是随机触发的。那就是有时它会被触发，有时不会。我计算在触发和未触发时找到任何模式。

我在这里错过了什么？

Answer 1

编辑
我猜想最有可能的罪魁祸首正是@PatrickSteele 所说的。来自 MDN:

Note: To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with; some don't display them at all. For a list of specific browsers, see the Browser_compatibility section.

我想说您可能会看到不一致的行为，因为您有时没有与页面交互。

这可能是语法错误。 created 应该是一个方法

created () {    
        window.addEventListener('beforeunload', this.removeUser)  
    },

    methods: {
      removeUser () {
        //remove user here
      }
    }

fiddle 工作:https://jsfiddle.net/e6m6t4kd/3/