beforeRouteLeaveの制限はありますか？

Question

私はvue-routerを使ってVue.jsを使っていますが、 'beforeRouteLeave'のナビゲーションガードに関する質問があります。私はProductDetailコンポーネント内の製品オブジェクトのダーティチェックに使用しています。これは、ユーザーがキャンセルボタンをクリックしたときです（保存されていない変更がある場合は確認ダイアログを表示できます）。 [/ product/detail]からの '/ product/list'へのルートを変更するキャンセルボタンをクリックする限り、正常に動作します。ただし、ユーザーがブラウザのアドレスバーに '/ product/list'を直接入力した場合は、呼び出されません。これはショーストッパーではなくマイナーな迷惑ですが、私はこれを回避して、リンクやボタンのクリックと同じように動作する方法があるかどうか疑問に思っています。

詳細説明： 問題のコンポーネントでは、[キャンセル]ボタンをクリックすると、ルータの設定でパス '/ product/list'で定義されているthis.$router.push({name:'product-list'})が呼び出されます。これが起こると、ルートが変更される前にguard 'beforeRouteLeave'が正常に呼び出されます。ただし、ユーザーがアドレスバーに '/ product/list'を直接入力してルートを変更すると、コンポーネントのbeforeRouteLeaveがバイパスされます。

Answer 1

お試しくださいwindow.onbeforeunloadhttps://jsfiddle.net/z11fe07p/578/変更を保存せずにリンクを離れることを避けたい場合。

window.onbeforeunload = function(){ 
    return "Are you sure you want to close the window?"; 
}