web-dev-qa-db-ja.com

Vuejsの「beforeunload」イベントが期待どおりにトリガーされない

vue routerのルートで使用されるコンポーネントの作成されたフックに '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」イベントハンドラーはランダムにトリガーされます。それは時々それが引き起こされることもあればそうでないこともあります。トリガーされたときとされていないときのパターンを見つけます。

ここで何が欠けていますか？

vue.jsvuejs2dom-eventsvue-routeraddeventlistener
3
wrufesh

Vue F5またはCtrl + Rを押すたびに）でページの更新/変更を検出する場合は、 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();
    }
}
1
Bach Duong

私は上記の例をいじる必要がありました。これが最も堅牢なソリューションだと思います。

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

それは私のために働いています。 vue.jsでリロードまたは閉じる前に何かをしている間

enter image description here

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