私はフロントエンドの新人ですが、バックエンドのバグの中断のない生産管理に尽力しており、これを自分自身の励みにしています。最近依頼を受け、インターネットで多くの事例を検索しましたが、根本的な問題は解決されませんでした。ここで私自身の解決過程を記録しておきます。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) インストール グラフィック チュートリアル
目次1. 数字を逆にする2. 配列内の最大のn個の数値を取得する3. 階乗を計算する4. 現在の動作...
1 MySQLの自動コミット設定MySQL はデフォルトで自動的にコミットします。つまり、各 DML...
目次mysqldの起動方法方法 1: mysqld方法 2: mysqld_safe方法3: mys...
Docker と Docker Machine の違いDocker はクライアント サーバー アーキ...
この記事では、MySQL のトランザクション管理操作について説明します。ご参考までに、詳細は以下の通...
この記事では、シャトルボックス機能を実現するためのjQueryの具体的なコードを参考までに紹介します...
目次序文1. 新しいパーティションを準備する2. ブートパーティションをコピーする3. fstabフ...
目次FormDataとは何ですか? vueとaxiosの協力による実践的な体験追加()セット()消去...
目次1. はじめに2. ルール検証の入力モード2.1 サンプルコード2.2、フォーム項目2.3. 小...
序文smb は、クライアントとサーバー間の Web 接続および情報通信に使用できるプロトコルの名前で...
Web 標準に準拠した Web ページの構築は、jb51.net が常に全員と議論しているトピックで...
目次使いやすいプロジェクトを作成するvue-cli 作成ヴィートクリエイションvue-routerを...
最近、IIS をサーバーとして使用すると、apk ファイルがサーバーにアップロードされましたが、ダウ...
序文動的プロキシの原理を説明する前に、まず、mybatis を統合した後の dao 層の 2 つの実...
開発動向: html (ハイパーテキスト マークアップ言語) - xhtml (拡張ハイパーテキスト...