はじめに
このプロジェクトでは、vue-router v3.4.0 バージョンにおける問題を解決する方法を学びます。この問題とは、ルーター クエリ内の未定義の値が現在未定義の文字列に変更されているというものです。この問題を解決するには、vue-router ライブラリの query.js ファイル内の resolveQuery 関数を修正します。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下のことを学びます。
query.jsファイル内のresolveQuery関数を見つけて理解する- クエリ内の未定義の値を適切に処理するように
resolveQuery関数を修正する - 修正を適用して vue-router 3.4.0 プロジェクトを再構築する
- クエリ内の未定義の値が現在正しく空文字列として表示されることを確認するために修正をテストする
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- サードパーティ ライブラリの問題を特定して修正する
- 修正を適用するためにプロジェクトを変更して再構築する技術を適用する
- 望ましい動作が達成されることを確認するために変更を十分にテストする重要性を理解する
プロジェクト構造を設定する
始めるには、左側のファイルのディレクトリ構造を以下のように見てください。
├── vue-router-3.4.0
├── vue.js
└── index.html
- WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。
- VM の上部の「Web 8080」を開き、手動で更新します。結果は以下のようになるはずです。
- 上記の画像のアドレスをブラウザにコピーし、新しいウィンドウを開いて、アドレスバーとページの表示を確認します。
Vue-Router 3.4.0 における未定義のクエリ値の問題を解決する
このステップでは、vue-router v3.4.0 バージョンにおいて、ルーター クエリ内の未定義の値が現在未定義の文字列に変更される問題を解決する方法を学びます。
vue-router-3.4.0/src/util/query.jsファイルを開きます。- ファイル内の
resolveQuery関数を見つけます。 resolveQuery関数を更新して、クエリ内の未定義の値を処理します。コードを以下のように変更します。
export function resolveQuery(
query:?string,
extraQuery: Dictionary<string> = {},
_parseQuery:?Function
): Dictionary<string> {
//...
// TODO
for (const key in extraQuery) {
const value = extraQuery[key];
parsedQuery[key] = Array.isArray(value)
? value.map((v) => (!v? v : "" + v))
:!value
? value
: "" + value;
}
return parsedQuery;
}
主な変更点は以下の通りです。
parsedQuery[key] =...の代入で、valueがundefinedであるかどうかを確認します。もしそうであれば、undefinedの値の代わりに空文字列''を代入します。- 配列の値の場合、個々の要素が
undefinedであるかどうかも確認し、それらを空文字列に置き換えます。
これにより、クエリ内の未定義の値が適切に処理され、未定義の文字列に変換されないようになります。
修正をテストする
- ターミナルで
vue-router-3.4.0ディレクトリを開きます。 - 依存関係をインストールするために
npm installコマンドを実行します。このプロセスには時間がかかる場合がありますので、しばらくお待ちください。（長時間止まった場合は、Ctrl + Cを押してプロセスを終了してから、再度このコマンドを実行してください。） - すべての依存関係が正常にインストールされた後、
npm run buildコマンドを実行して、プロジェクトを再構築してリリースします。 - 初期ページを表示していたブラウザ ウィンドウを更新します。
- ページの動作とアドレスバーの URL を確認します。クエリ内の未定義の値は、これまで通り空文字列として正しく処理され表示されるはずです。
おめでとうございます！vue-router 3.4.0 バージョンの未定義のクエリ値の問題を正常に修正しました。
まとめ
おめでとうございます！このプロジェクトを完了しました。あなたは実験（Lab）をもっとたくさん行って、技術力を向上させることができます。
