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

Question

我已经在 vue 路由器路由使用的组件的创建挂钩上注册了“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’ 事件处理程序是随机触发的。那就是有时它会被触发，有时不会。我计算在触发和不触发时找到任何模式。

我在这里错过了什么？

原文由 wrufesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑

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

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

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

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

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

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

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

原文由 BFalls 发布，翻译遵循 CC BY-SA 3.0 许可协议