ページにジャンプしてフォームデータを vue に保持する方法

Vue は、開発者がシングル ページ アプリケーション (SPA) を簡単に構築できるようにする、最新の簡単に拡張可能な JavaScript フレームワークです。 Vue フレームワークの重要な機能は、ページ全体を更新せずにページ コンテンツを動的に更新できる機能であり、これによりアプリケーションの応答速度とユーザー エクスペリエンスが向上します。ただし、開発プロセスではデータ転送の問題を解決するのは比較的難しいため、この記事では、Vue がページにジャンプした後のフォーム データを維持する方法を紹介します。

クライアント側データ ストレージ

Vue では、通常、クライアント側データ ストレージ (クライアント側データ ストレージ) を使用して、データ転送の問題を解決します。データは、メモリ、Cookie、ブラウザ キャッシュ (localStorage および sessionStorage)、またはデータベースを使用して保存できます。この記事では、主にブラウザのキャッシュに焦点を当てます。ブラウザのキャッシュを使用すると、クライアントのデータをクライアントのブラウザに保存し、ユーザーが同じサイトにアクセスしたときに、ブラウザのキャッシュからデータを自動的に復元できます。

Vue-router

Vue プロジェクトでは、通常、ページ間のジャンプを実現するためのルーティングを管理するために Vue-router が使用されます。 Vue-router は、Vue によって公式に提供されているルーティング マネージャーであり、単一ページの Web アプリケーションを迅速に構築するのに役立ちます。

Vue-routerのプリフック関数

Vue-routerのプリフック関数は、ルートがジャンプする前に実行される関数です。 Vue-router にはさまざまなプリフック関数が用意されており、ここでは beforeRouteLeave 関数を使用して、フォーム データの保存など、現在のルートから離れる前にいくつかの操作を実行します。

beforeRouteLeave 関数を使用してフォーム データを保存する

beforeRouteLeave 関数でフォーム データを保存し、現在のページを離れた後にそのデータを sessionStorage に保存できます。次回ユーザーがページにアクセスしたときに、sessionStorage からデータを直接復元できます。

以下は例です。

beforeRouteLeave (to, from, next) {
  // 保存表单数据
  sessionStorage.setItem('form_data', JSON.stringify(this.form));
  next();
}

作成したフック関数を使用してフォームデータを復元します

作成したフック関数でフォームデータを復元し、からデータをロードできます。処理中のアプリケーションへの sessionStorage。

以下は例です:

created () {
  // 从 sessionStorage 中恢复表单数据
  const formDataString = sessionStorage.getItem('form_data');
  if (formDataString) {
    this.form = JSON.parse(formDataString);
  }
}

beforeRouteLeave と作成したフック関数を使用すると、ページにジャンプした後にフォーム データを維持する Vue の機能を簡単に実装できることがわかります。アプリケーションのユーザー エクスペリエンスも向上します。

実際の応用例

上記は簡単な例であり、実際の応用ではニーズに応じて柔軟に活用していただけます。たとえば、編集ページでフォーム データを保存し、戻るときにデータを復元する、新しいページにデータを保存するが、現在のページでは sessionStorage を使用せず、他のページに移動した後にデータを復元する、ページで localStorage を使用するなどです。データを長期間保存したいときなど。

結論

ページにジャンプした後にフォーム データを保持する Vue は一般的な要件であり、クライアント側のデータ ストレージとプリフック関数を使用して簡単に実現できます。実際の開発では、ニーズに応じてこれらの手法を柔軟に活用することで、アプリケーションのユーザーエクスペリエンスを向上させることができます。

以上がページにジャンプしてフォームデータを vue に保持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。