Vue Router の cleanPath 関数の修正

はじめに

このプロジェクトでは、vue-router ライブラリの cleanPath 関数を修正することで、バグを修正する方法を学びます。vue-router ライブラリは、Vue.js アプリケーションに人気のあるルーティングソリューションであり、特に複数のスラッシュで始まるパスのようなエッジケースで正しく機能することを確認することが重要です。

👀 プレビュー

🎯 タスク

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

• vue-router ライブラリの cleanPath 関数の問題を理解する
• プロジェクトに必要な依存関係をインストールする
• 問題を修正するために cleanPath 関数を見つけて修正する
• 更新された cleanPath 関数でプロジェクトを再構築する
• 修正が適用されたことを確認するためにテストする

🏆 成果

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

• サードパーティのライブラリの問題を特定して診断する
• サードパーティのライブラリのコードを修正して更新する
• 更新されたコードでプロジェクトを再構築してリリースする
• 修正が適用されたことを確認するためにテストする

Skills Graph

プロジェクト構造を設定する

このステップでは、プロジェクト構造を設定し、vue-router ライブラリの問題とその修正方法を学びます。

vue-router ライブラリのバージョン 3.5.2 には、複数のスラッシュ (///) で始まるパスが実際に別のドメインにリダイレクトされる可能性があるバグがあります。これは、ライブラリ内の cleanPath 関数が 2 つのスラッシュを置き換えるだけで、複数のスラッシュ全てを置き換えないためです。

この問題を修正するには、vue-router-3.5.2/src/util/path.js ファイル内の cleanPath 関数を修正する必要があります。

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

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

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

3. 上記の画像のアドレスをコピーして、ブラウザで新しいウィンドウを開き、「Go to Foo」ボタンをクリックすると、ページが Google のページにジャンプします。

cleanPath 関数を修正する

1. vue-router-3.5.2/src/util/path.js ファイルを開きます。

2. cleanPath 関数を探します。

   export function cleanPath(path: string): string {
     return path.replace(/\/\//g, "/");
   }

3. cleanPath 関数を更新して、複数のスラッシュをすべて 1 つのスラッシュに置き換えます。

   export function cleanPath(path: string): string {
     return path.replace(/\/+/g, '/');
   }

   /\/+/g 正規表現は、1 つ以上の連続するスラッシュを一致させ、それらを 1 つのスラッシュに置き換えます。

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

1. ターミナルで、vue-router-3.5.2 ディレクトリに移動します。
2. 依存関係をインストールするために npm install コマンドを実行します。このプロセスには時間がかかる場合がありますので、しばらくお待ちください。（長時間止まった場合は、Ctrl + C を押してプロセスを終了してから、再度このコマンドを実行してください。）
3. すべての依存関係が正常にインストールされた後、更新された cleanPath 関数でプロジェクトを再構築してリリースするために npm run build コマンドを実行します。
4. ブラウザのページに戻り、ページを更新します。
5. 「Go to Foo」ボタンをクリックすると、ページが Google のページにリダイレクトされなくなり、代わりにローカルアプリケーションのままになるはずです。

おめでとうございます！cleanPath 関数を更新することで、vue-router ライブラリの問題を正常に修正しました。

まとめ

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