Vue Router のバグ修正：クエリからオブジェクトパラメータを取得する

はじめに

このプロジェクトでは、vue-router ライブラリにあるバグを修正する方法を学びます。このバグは、オブジェクトをクエリパラメータにプッシュする際に問題を引き起こします。このプロジェクトでは、問題のあるファイルを特定し、問題を特定し、バグを解消するためのソリューションを実装するための必要な手順を案内します。

👀 プレビュー

vue router bug fix demo

🎯 タスク

このプロジェクトでは、以下を学びます。

開発環境をセットアップし、必要な依存関係をインストールする方法
バグが含まれるファイルを特定し、修正準備をする方法
resolveQuery 関数のバグを修正する方法
修正を再構築してテストし、問題が解消されることを確認する方法

🏆 成果

このプロジェクトを完了すると、以下ができるようになります。

サードパーティのライブラリのバグを特定して修正する
クエリパラメータのオブジェクト値を処理する
修正が予想通り機能することを確認する
オープンソースプロジェクトに貢献し、問題解決とデバッグのスキルを向上させる

バグを修正する

始めるには、左側のファイルのディレクトリ構造を以下のように見てください。

├── vue-router-3.4.1
├── vue.js
└── index.html

WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

ブラウザのコンソールを開き、出力を確認します。最初に「test」ボタンをクリックし、次に「pushQuery」ボタンをクリックします。ブラウザのプレビューページは以下のようになるはずです。

Initial Effect

vue-router v3.4.1 のコードにはバグがあり、this.$router.pushを使用した場合、query内のkeyに対応するvalueがオブジェクトの場合、それが文字列"[object object]"として読み取られ、オブジェクトの値を正しく取得できなくなります。この問題を修正してください。

このステップでは、resolveQuery関数のバグを修正します。

vue-router-3.4.1/src/util/query.jsファイルを探し、問題の再現に基づいて問題を解決するために 41 行目に移動します。
castQueryParamValue関数は、値がオブジェクトの場合を処理する必要があります。関数を以下のように変更します。
```
const castQueryParamValue = (value) =>
  typeof value == "number" ? "" + value : value;
```

修正を再構築してテストする

このステップでは、vue-router-3.4.1 パッケージを再構築し、修正をテストします。

ターミナルで vue-router-3.4.1 ディレクトリに移動します。
依存関係をインストールするために npm install コマンドを実行します。このプロセスには時間がかかる場合があるので、しばらくお待ちください。（長時間止まった場合は、Ctrl + C を押してプロセスを終了し、再度このコマンドを実行してください。）
すべての依存関係が正常にインストールされたら、npm run build コマンドを実行して、プロジェクトを再構築してリリースします。
ページを再起動し、「Web 8080」をクリックしてページを表示します。
再度ブラウザのコンソールを開き、出力を確認します。最初に「Test」ボタンをクリックし、次に「pushQuery」ボタンをクリックして、修正の効果を確認してテストします。

fix effect demonstration

修正により、query 内の key に対応する value がオブジェクトの場合を正しく処理できるようになり、コンソールに正しく表示されるはずです。

まとめ

おめでとうございます！このプロジェクトを完了しました。LabEx でさらに多くの実験を行って、スキルを向上させることができます。