Vue Router 3.1.5 における空の pathMatch バグを修正する

はじめに

このプロジェクトでは、vue-router-3.1.5 ライブラリのバグを修正する方法を学びます。このバグは、URL パス内のパラメータを埋める責任がある fillParams 関数に関連しています。pathMatch パラメータが空文字列の場合、正しいパスの計算に影響を与える可能性があります。

👀 プレビュー

バグ修正のデモ gif

🎯 タスク

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

vue-router-3.1.5/src/util/params.js ファイル内の fillParams 関数をどのように見つけるか
空の pathMatch の問題に対処するために fillParams 関数をどのように修正するか
更新された fillParams 関数で vue-router プロジェクトをどのように再構築するか
ブラウザウィンドウを更新し、アドレスバーの正しい動作を確認することで修正をどのようにテストするか

🏆 成果

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

サードパーティのライブラリ内のバグを特定して修正する
コード変更を行った後にプロジェクトを再構築する
望ましい動作が達成されることを確認するために修正をテストする

fillParams 関数を修正する

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

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

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
VM の上部の「Web 8080」を開き、手動で更新します。結果は以下のようになるはずです。

画像の説明

上の図のアドレスをブラウザにコピーして新しいウィンドウを開き、それぞれ "[button1]" ボタンと "[button2]" ボタンをクリックします。アドレスバーの結果は以下のようになります。

初期の結果

このステップでは、vue-router-3.1.5/src/util/params.js ファイル内の fillParams 関数を修正して、空の pathMatch の問題を解決します。

vue-router-3.1.5/src/util/params.js ファイルを開きます。
fillParams 関数を見つけます。
if (params.pathMatch) params[0] = params.pathMatch の行の後に以下のコードを追加します。

if (params.pathMatch === "") params[0] = "";

このコードは、params.pathMatch が空文字列であるかどうかを確認します。もしそうなら、関数はパラメータを埋めようとせずに元の path を返します。

更新された fillParams 関数は以下のようになるはずです。

export function fillParams(
  path: string,
  params:?Object,
  routeMsg: string
): string {
  params = params || {};
  try {
    const filler =
      regexpCompileCache[path] ||
      (regexpCompileCache[path] = Regexp.compile(path));

    // Fix #2505 resolving asterisk routes { name: 'not-found', params: { pathMatch: '/not-found' }}
    if (params.pathMatch) params[0] = params.pathMatch;
    if (params.pathMatch === "") params[0] = "";

    return filler(params, { pretty: true });
  } catch (e) {
    if (process.env.NODE_ENV!== "production") {
      // Fix #3072 no warn if `pathMatch` is string
      warn(
        typeof params.pathMatch === "string",
        `missing param for ${routeMsg}: ${e.message}`
      );
    }
    return "";
  } finally {
    // delete the 0 if it was added
    delete params[0];
  }
}

vue-router プロジェクトを再構築してテストする

このステップでは、ブラウザウィンドウを更新することで修正をテストします。

ターミナルで vue-router-3.1.5 ディレクトリを開きます。
依存関係をインストールするために npm install コマンドを実行します。このプロセスには時間がかかる場合があるので、しばらくお待ちください。（長時間止まった場合は、Ctrl + C を押してプロセスを終了してから、再度このコマンドを実行してください。）
すべての依存関係が正常にインストールされた後、npm run build コマンドを実行して、プロジェクトを再構築してリリースします。
ブラウザウィンドウに戻り、ページを更新します。
再度 "[button1]" と "[button2]" のボタンをクリックし、アドレスバーの動作を観察します。

このとき、pathMatch が空文字列であってもアドレスバーに正しいパスが表示されるはずです。問題が修正された後の結果の画像を以下に示します。

修正後のアドレスバーの動作

おめでとうございます！あなたは vue-router-3.1.5 ライブラリの問題を正常に修正しました。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。

正しいパス計算のための空の pathMatch