vue ブラウザを閉じると、閉じるかどうかを尋ねるメッセージが表示されます

シングルページ アプリケーションの人気が高まるにつれ、主流のフロントエンド フレームワークとして Vue が広く使用されるようになりました。ただし、ブラウザが閉じているときにアプリケーションでプロンプトを実装するのは、より困難な問題です。

通常、ブラウザを閉じているとき、ユーザーは誤ってブラウザのタブをすべて閉じたり、操作してしまう可能性があります。この時点で、アプリケーション内に未保存のデータやクリーンアップが必要なその他のデータがある場合、いくつかの問題が発生します。

この問題を解決するには、Vue アプリケーションにプロンプ​​ト レイヤーを追加する必要があります。ユーザーがブラウザ タブを閉じようとすると、閉じてもよいかどうかを尋ねるプロンプトが表示されます。

Vue は、アンロード前にブラウザーを閉じるイベントを提供します。これは、ブラウザーがページを閉じるか更新するときにトリガーされます。 Vue のライフ サイクル関数でページの beforeunload イベントをリッスンできます:

created() {
  window.addEventListener('beforeunload', this.handleBeforeunload)
},
beforeDestroy() {
  window.removeEventListener('beforeunload', this.handleBeforeunload)
},
methods: {
  handleBeforeunload(event) {
    event.returnValue = '您确定要关闭该页面吗？'
  }
}

上記のコードでは、作成した関数にイベント リッスンを追加します。ブラウザーがページを閉じるか更新すると、handleBeforeunload 関数が引き起こされる。この関数では、event.returnValue を使用してプロンプト情報を返し、アプリケーションが閉じられたときにプロンプ​​トを実装します。

Vue アプリケーションが他の JS スクリプトと一緒にブラウザ終了イベントを制御する場合、競合が発生する可能性があることに注意してください。現時点では、vue-router Guard を使用してルーティング プロンプトをより詳細に制御する方が良い解決策です。

vue-router では、ルートが離れる前にトリガーされる beforeRouteLeave ガードを使用できます。現在のルートとターゲット ルートが一致するかどうか、およびユーザーが特定の操作を実行したかどうかに基づいて、プロンプトを表示するかどうかを決定できます。

beforeRouteLeave(to, from, next) {
  if (this.formDirty) {
    if (confirm('您确定要离开该页面吗？')) {
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}

上記のコードでは、まず、保存されていないデータ (つまり、formDirty) があるかどうかを判断します。変数) が存在する場合は、プロンプト ボックスを表示し、ユーザーの選択に従って現在のページを離れるかどうかを決定します。存在しない場合は、直接次のルートに進みます。

つまり、Vue アプリケーションで beforeunload を使用するか、vue-router で beforeRouteLeave を使用するかに関係なく、シンプルなコードを使用して、エクスペリエンスを向上させ、データ損失を回避しながら、ブラウザーを閉じたときにプロンプ​​トを実現できます。質問。

以上がvue ブラウザを閉じると、閉じるかどうかを尋ねるメッセージが表示されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。