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

Question

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

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

在组件A上

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

这对我有用。在重新加载或关闭之前做一些事情 vue.js

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

Answer 3

我不得不对上面的例子做一些摆弄，我相信这是最强大的解决方案：

let app1 = new Vue({
    delimiters: ['[[', ']]'],       
    el: '#app',
    data: {
        dirty_form: true,
    },

    created () {
        console.log('created')
        window.addEventListener('beforeunload', this.confirm_leaving)
    },

    methods: {
        confirm_leaving (evt) {
            if (this.dirty_form) {
                const unsaved_changes_warning = "You have unsaved changes. Are you sure you wish to leave?";
                evt.returnValue = unsaved_changes_warning; 
                return unsaved_changes_warning;
            };
        };
    },
});

Answer 4

如果您想在按 F5 或 Ctrl + R 时检测 Vue 中的页面刷新/更改，您可能需要使用Navigation Timing API。

PerformanceNavigation.type，会告诉你页面是如何被访问的。

created() {
    // does the browser support the Navigation Timing API?
    if (window.performance) {
        console.info("window.performance is supported");
    }
    // do something based on the navigation type...
    if(performance.navigation.type === 1) {
        console.info("TYPE_RELOAD");
        this.removeUser();
    }
}