Vue がルート変更を監視するときに watch メソッドが複数回実行される理由と解決策

Vue がルート変更を監視するときに watch メソッドが複数回実行される理由と解決策

私はフロントエンドの新人ですが、バックエンドのバグの中断のない生産管理に尽力しており、これを自分自身の励みにしています。最近依頼を受け、インターネットで多くの事例を検索しましたが、根本的な問題は解決されませんでした。ここで私自身の解決過程を記録しておきます。Nuggetsで話すのも初めてなので、お手柔らかにお願いします。

要件の説明:

ページ A と B の 2 つのページがあります。ページ A の orderId は、ルーティング パラメータによってページ B に渡され、データ関連付けクエリが実行され、ページ B に表示される必要があります。

要件分析:

この要件がわかれば、ページ B のルートの変更を監視し、データを照会するメソッドを実行するためのパラメータを取得することを考えるのは簡単なはずです。

ニーズの解決

ページA:

定数ルート = {
        名前: 'BpageName',
        パラメータ: { orderId: this.tableData[index].id },
        メタ: {
          タイトル: 「ページB」
        }
      }
this.$router.push(ルート)

ページBを再度開くためのルートをプッシュする

次に、ページ B はルーティング パラメータを受け入れます。

@Watch('$route.params.packageId')
routeParamsChanged(newParams: any, oldParams: any) :void { // 渡されたパラメータの変更を監視してパラメータを再コピーする if (newParams) {
      this.getList(新しいパラメータ)
    }
}

シンプルに見えませんか?

しかし、問題は、ページ B にキープアライブ ページ キャッシュがあるため、ルートが初めて切り替えられたときに routeParamsChanged メソッドが 1 回だけ実行され、期待どおりの効果が得られないことです。ただし、ページ B を閉じたり、ページ B を閉じずにページ A からページ B にジャンプしたりすると、routeParamsChanged メソッドが 2 回以上トリガーされます。
多くの情報を確認した後、Vue プロジェクト ウォッチで関数が繰り返しトリガーされる問題がこの状況の原因であることがわかりました。

解決策1: fullPathがページAであるかどうかを判断する

if (this.$route.fullPath === 'ページルーティングパス') {
    // 何かをする
}

ワクワクしながら試してみました。

@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // 渡されたパラメータの変更を監視してパラメータを再コピーします if (newParams === '/Apage') {
      this.getList(新しいパラメータ)
    }
}

結果はまだ機能しておらず、routeParamsChanged メソッドは依然として 2 回以上実行されます。 解決策 2: ページがアクティブ状態かどうかを判断するためのフラグ パラメータを追加します。キープアライブ キャッシュを使用するコンポーネントは、アクティブ化イベントと非アクティブ化イベントのみをトリガーするため、これら 2 つのイベントがトリガーされたときにフラグを true と false に設定します。GetList() は、フラグが true の場合にのみ実行されます。

プライベート activatedFlag: ブール値 = false
アクティブ化(){
    this.activatedFlag = true;
}

非アクティブ化(){
    this.activatedFlag = false;
}
@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // 渡されたパラメータの変更を監視してパラメータを再コピーします if (newParams && this.activatedFlag) {
      this.getList(新しいパラメータ)
    }
}

今回は修正されましたか?結果はまだ機能しておらず、routeParamsChanged メソッドは依然として 2 回以上実行されます。 クラッシュ...

問題解決

上記のソリューション 2 を参考にして、パラメータを取得するメソッドと、activated() ライフサイクル フック関数内でデータを取得するメソッドを呼び出すメソッドを最終的に実装できます。ルートの変更をリッスンする必要はありません。this.$route.params.orderId を取得するだけでデータを取得できます。

プライベート activatedFlag: ブール値 = false
アクティブ化(){
    this.activatedFlag = true
    if (this.$route.params.orderId && this.activatedFlag) {
      this.getList(this.$route.params.orderId)
    }
}

非アクティブ化(){
    this.activatedFlag = false;
}

完了しました。ついに解決しました。専門家の皆様、コードについてコメントをお願いします。より良い意見や提案がある場合は、コメントを残してガイダンスを提供してください。

以上が、Vue がルート変更を監視する際に、watch メソッドが複数回実行される理由と解決策の詳細な内容です。Vue watch メソッドが複数回実行される理由と解決策の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • 同じページを動的にロードするための Vue ルーティングリスニングの例
  • VueはルーティングフックインターセプターbeforeEachとafterEachを使用してルーティングを監視します
  • Vueはブラウザのネイティブリターンボタンをリッスンしてルートジャンプ操作を実行します。
  • Vueはルートの変更を監視し、App.vueファイル内のページを更新します。
  • Vueルーティングキャッシュルーティングネストルーティングガードは物理的な戻り操作をリッスンします
  • Vue がルート変更を監視するいくつかの方法の概要

<<:  Linux での MySQL 5.7.19 (tar.gz) インストール グラフィック チュートリアル

>>:  LinuxでSVNサーバーを構築する方法

推薦する

集める価値のある 15 個の JavaScript 関数

目次1. 数字を逆にする2. 配列内の最大のn個の数値を取得する3. 階乗を計算する4. 現在の動作...

MySQLとSpringの自動コミットの詳細な説明

1 MySQLの自動コミット設定MySQL はデフォルトで自動的にコミットします。つまり、各 DML...

MySQLの起動と接続方法の例分析

目次mysqldの起動方法方法 1: mysqld方法 2: mysqld_safe方法3: mys...

Docker Machineの詳細な説明

Docker と Docker Machine の違いDocker はクライアント サーバー アーキ...

MySQLのトランザクション管理操作の詳細な説明

この記事では、MySQL のトランザクション管理操作について説明します。ご参考までに、詳細は以下の通...

jQueryはシャトルボックス機能を実現する

この記事では、シャトルボックス機能を実現するためのjQueryの具体的なコードを参考までに紹介します...

Kylin 4.0.2 (Ubuntu) でブート パーティションを拡張するプロセスの紹介

目次序文1. 新しいパーティションを準備する2. ブートパーティションをコピーする3. fstabフ...

Vue で axios を使用して画像をアップロードするときに発生する問題

目次FormDataとは何ですか? vueとaxiosの協力による実践的な体験追加()セット()消去...

Vue Element-ui フォーム検証ルールの実装

目次1. はじめに2. ルール検証の入力モード2.1 サンプルコード2.2、フォーム項目2.3. 小...

Linux で完全な Samba サーバーを構築する方法 (CentOS バージョン)

序文smb は、クライアントとサーバー間の Web 接続および情報通信に使用できるプロトコルの名前で...

HTMLタグを閉じるのを忘れないでください

Web 標準に準拠した Web ページの構築は、jb51.net が常に全員と議論しているトピックで...

vue3+TypeScript+vue-routerの使い方

目次使いやすいプロジェクトを作成するvue-cli 作成ヴィートクリエイションvue-routerを...

IIS サーバーから apk ファイルをダウンロードする際の 404 エラーの解決策

最近、IIS をサーバーとして使用すると、apk ファイルがサーバーにアップロードされましたが、ダウ...

Mybatis マッパー動的プロキシの原理の分析

序文動的プロキシの原理を説明する前に、まず、mybatis を統合した後の dao 層の 2 つの実...

html、xhtml、xmlの違い

開発動向: html (ハイパーテキスト マークアップ言語) - xhtml (拡張ハイパーテキスト...