Vueルーティングはページステータスを復元する操作メソッドを返します

ルートパラメータ、ルートナビゲーションガード: ページが戻ったときに検索結果を保持する

需要シナリオ: ホームページでコンテンツを検索し、クリックして詳細ページに移動し、ホームページに戻って検索結果を保持します。

解決策: ルーティングパラメータ、ルーティングガード

要件の説明

Vue を使用してフロントエンドを開発しているときに、ホームページでデータを検索し、検索結果をクリックして詳細ページに入り、詳細ページを閲覧した後にホームページに戻るというシナリオに遭遇しました。しかし、この時点では、以前の検索履歴やページめくりが消えてしまい、ユーザーエクスペリエンスが低下します。そのため、復帰後はジャンプ前のページパラメータの状態を復元する必要があります。

もちろん、条件が許せば、最も簡単な方法は検索結果をクリックして新しいページで開くことです (Baidu のように)。ただし、現在の要件は完全な Vue 開発プロジェクトであり、外部アドレスを公開しておらず、詳細もそれほど多くないため、新しいページを使用するのは適切ではありません (パフォーマンスが悪く、膨大な数のタブが作成されやすい)。

より簡単に実装できる 2 つのソリューションを次に示します。

• 解決策1: 検索パラメータをルートパラメータ（route.query）に保存し、ページを読み込むときにパラメータに基づいて検索する

利点: リフレッシュに影響なし、実装が簡単

デメリット: パラメータは基本型のみで、長さも制限されています。パスが見苦しく、ブラウザからの戻りにのみ有効で、手動でホームページに戻ることはできません。

• 解決策 2: ルート ガード フックを使用して、ページを離れる前にページ パラメータをローカルに保存します (vuex、ローカル ストレージなど)

利点：パラメータの種類と長さは比較的自由です。パスはすっきりと美しく見えます。どんな方法でもホームページに戻るのに効果的です。

デメリット: 追加のデータ保存操作が必要です。ストア モードまたは vuex を使用すると、ページの更新が失敗します。

解決策 1: ルーティングパラメータ

パラメータがそれほど多くなく、パスの後に長いパラメータ文字列があっても構わない場合 (強迫性障害の涙を流す)、パラメータをルーティング パスに直接配置できます (たとえば、Baidu はこれを実行します: baidu.com/s?wd=abc&rsv_spt=1&rsv_iqid=0x8a76279a000e2979&... 、ご覧のとおり、これは確かに長い文字列です)。

検索をクリックした後、vue router を使用してジャンプし、パラメータを渡します。

// 検索ページ search(param) {
  // その他の処理 this.$router.push({
      名前: "インデックス",
      query: { ...this.queryParam }, // オブジェクトをキーと値に展開します ​​});
},

ここで、クエリパラメータの受け渡しと params パラメータの受け渡しの違いに注意する必要があります。前者のパラメータは、パスの後に?k1=v1&k2=v2の形式で継続され、アドレスバーに直接表示されるため、ページジャンプや更新の影響を受けません。後者は、対応するページに初めてジャンプするときにのみ機能し、更新すると消えます。したがって、ここではクエリを使用してパラメータを渡します。パス内のパラメータをフォーマットに従って手動で記述することも可能ですが、可読性や拡張性は明らかに悪くなります。単純なパラメータが 1 つまたは 2 つしかない場合を除いては推奨されません。

また、このパラメータはパス内に配置されますので、基本型のキーと値のペアのみが可能であり、配列やオブジェクトは適切にサポートされません。パラメータが単純な場合は、対応するオブジェクトをパラメータとして展開できます（異なるオブジェクトに重複するキーがないことを確認する必要があります）が、ジャンプ先の検索結果ページを読み込む場合は、属性を 1 つずつしか取得できません。

// 検索結果ページがマウントされます() {
  // $route と $router を区別する
  if (this.$route.query.type) {
    type = this.$route.query.type; とします。
    キーワード = this.$route.query.keyword; とします。
    // ...各パラメータを1つずつ取得する//検索操作を実行する} else {
    // 検索パラメータなし（検索結果とホームページが同じページにあるため、通常通りホームページを開くことも可能です）
  }
},

解決策2: ローカルストレージパラメータ

保存したいパラメータが3つのオブジェクトなので、キー値に展開するのは不便なので、この解決策を使用しました。プロジェクトではvuexも使用するため、vuexに保存しています。実際の状況に応じてどこに保存しても構いません。 vuex の欠点は、一度更新されると消えてしまうため、検索結果やエクスペリエンスを最適化するその他の機能にほとんど影響を与えないことです。対応する需要があれば、ローカル ストレージに保存できます。

ニーズに応じてパラメータを変更する方法が多数あるため、変更時にパラメータを保存するのが面倒で、間違いや漏れが発生しやすくなります。したがって、ルーティングジャンプの前に必要なパラメータを均一に保存することを選択します。

Vue Router は、グローバルな事前/解析/事後ガード、ルーティング構成ガード、コンポーネント ガードなどの対応する機能を実装するための一連のルーティング ナビゲーション ガード API を提供します。いわゆる「ガード」は、実際には、使い魔が作成およびマウントされたのと同じように、レンダリング プロセスにおける「フック」に相当します。

ナビゲーション解析プロセスを完了します。

1. ナビゲーションが起動します。
2. 非アクティブ化されたコンポーネントでbeforeRouteLeaveガードを呼び出します。
3. グローバルbeforeEachガードを呼び出します。
4. 再利用されたコンポーネントでbeforeRouteUpdateガードを呼び出します (2.2 以降)。
5. ルート設定でbeforeEnter呼び出します。
6. 非同期ルーティング コンポーネントを解決します。
7. アクティブ化されたコンポーネントでbeforeRouteEnter呼び出します。
8. グローバルbeforeResolveガード (2.5 以降) を呼び出します。
9. ナビゲーションが確認されました。
10. グローバルafterEachフックを呼び出します。
11. DOM 更新をトリガーします。
12. beforeRouteEnterガード内のnextに渡されたコールバック関数を呼び出すと、作成されたコンポーネント インスタンスがコールバック関数のパラメーターとして渡されます。

明らかに、 beforeRouteLeaveフックはここで要件を十分に満たすことができます。

// 検索結果ページ beforeRouteLeave(to, from, next) {
  // vuex ストレージ操作 this.$store.commit("updateRevert", {
    クエリ: this.queryParam、
    ページ: this.pageParam、
    フィルター: this.filter,
  });
  next(); //後続のナビゲーション解析プロセスを続行します},

ページを読み込むときに、保存されているパラメータがあるかどうかを確認し、ある場合はそれに応じて復元します。

// 検索結果ページをマウントする() {
  // vuex に保存された検索パラメータがあるかどうかを確認します if (this.$store.state.revert) {
    定数を戻す = this.$store.state.revert;
    this.queryParam = revert.query;
    this.pageParam = revert.page; // オブジェクト全体を直接取得できます // 検索操作 } else {
    // 検索パラメータなし（検索結果とホームページが同じページにあるため、通常通りホームページを開くことも可能です）
  }
},

結論と参考文献

上記はページの状態を保存する 2 つの方法です。これらの選択肢の多くは、その時点の実際のニーズに関連しているため、すべてのシナリオで最適なソリューションであるとは限りません。特定のニーズに対して、この記事の解決策では不十分な場合や、より簡単な方法がある場合があります。この記事では、参考として、各ステップの実際のニーズと根拠を可能な限り説明しています。記事に抜けや不足がある場合は、コメント欄でお気軽に議論し、修正してください。

プログラムによるナビゲーション

ルートナビゲーションガード

Vue ルーティングの戻りとページ ステータスの復元に関するこの記事はこれで終わりです。Vue ルーティング ページ ステータスに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。