Vuejs'beforeunload'事件未按预期触发

Question

我已经在vue路由器的路由所使用的组件的已创建钩子上注册了“ beforeunload”事件。

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

在ComponentA上

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

        this.removeUser()

        return null
     })
}

嘲笑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：

注意：为了避免不必要的弹出窗口，除非页面已与之交互，否则某些浏览器不会显示在beforeunload事件处理程序中创建的提示。有些根本不显示它们。有关特定浏览器的列表，请参见Browser_compatibility部分。

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

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

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

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

小提琴作品：https : //jsfiddle.net/e6m6t4kd/3/

Answer 2

这对我来说是工作。while 在 vue.js 中重新加载或关闭之前执行某些操作

created() {
    window.onbeforeunload = function(){
           return "handle your events or msgs here";
    }
}