私はフロントエンドの新人ですが、バックエンドのバグの中断のない生産管理に尽力しており、これを自分自身の励みにしています。最近依頼を受け、インターネットで多くの事例を検索しましたが、根本的な問題は解決されませんでした。ここで私自身の解決過程を記録しておきます。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 回以上トリガーされます。 解決策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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux での MySQL 5.7.19 (tar.gz) インストール グラフィック チュートリアル
ClickHouse は、オープンソースの列指向 DBMS (Yandex によって開発) です。 ...
序文負荷分散には nginx を使用します。アーキテクチャのフロントエンドまたは中間層として、トラフ...
序文MySQL は、クライアント/サーバー構造に基づく、高速、高性能、マルチスレッドのオープン ソー...
目次序文ドローコールとはDrawCall はパフォーマンスにどのような影響を与えますか?ドローコール...
Linux ヘルプ ドキュメントでの echo の説明は、Python や Java などのプログラ...
ページ上の画像を強調表示することは非常に一般的です。ここでは、jQuery を使用して画像を強調表示...
1. protoをコンパイルするすべての .proto ファイルを保存するために、src フォルダー...
目次1. MySQLレプリケーションプロセス2. MySQLの遅延問題の分析3. プロモーション期間...
目次1. Windows システムでの Nginx のインストールと起動プロセス: 2. 起動時にN...
これが何を指しているのかをどのように判断するのでしょうか? ①グローバル環境で呼び出された場合はwi...
1. Apacheサーバーのインストールと設定yum インストール httpd -y systemc...
目次序文1. 準備 - サーバーとnginxの使用1. サーバーを準備する2. nginxをインスト...
現象: divを一定の振幅で円、楕円などに変更する方法: CSSのborder-radiusプロパテ...
最近、webpackの使い方を学んでいたときに、webpack-replace-loaderの設定正...
目次参照と反応参照反応的RefとReactiveの違いshallowRef と shallowRea...