Question

我已注册＆＃39; beforeunload＆＃39;事件在vue路由器路由使用的组件的创建挂钩上。

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

在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
},

此处＆＃39; beforeunload＆＃39;事件处理程序随机触发。有时它会被触发，有时则不会触发。我会在触发时找到任何模式，何时不是。

我在这里缺少什么？

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

如果您想在每次按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();
    }
}

Answer 3

为我工作。在重新加载或关闭之前进行一些操作 vue.js

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

Answer 4

我不得不摆弄上面的示例，我相信这是最可靠的解决方案：

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;
            };
        };
    },
});

Vuejs＆＃39; beforeunload＆＃39;事件未按预期触发

4 个答案: