Vue-Router 3.1.3 における V - スロット API の問題を修正する

はじめに

このプロジェクトでは、v-slot API を使用してルーターリンクコンポーネントを作成し、複数の子要素を提供した場合にコンポーネントのレンダリングが失敗する vue-router 3.1.3 のコードのバグを修正する方法を学びます。

👀 プレビュー

🎯 タスク

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

vue-router 3.1.3 のコードにおける問題を特定および同定する方法
link.js ファイルのコードを修正することで問題を解決する方法
修正済みの vue-router 3.1.3 プロジェクトを再構築およびリリースする方法
アプリケーションをテストすることで修正効果を検証する方法

🏆 成果

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

サードパーティのライブラリにおけるトラブルシューティングと問題の修正
コード変更後のプロジェクトを再構築およびリリースする
修正された問題の機能をテストおよび検証する

Vue-Router 3.1.3 の V-Slot API の問題を修正する

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

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

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

次に、VM の上部にある「Web 8080」を開き、手動で更新した後、ブラウザのコンソールで「コンソール」オプションを開いて、以下のようにブラウザでページをプレビューします。

このステップでは、v-slot API を使用してルーターリンクコンポーネントを作成し、複数の子要素を提供した場合にコンポーネントのレンダリングが失敗する vue-router 3.1.3 のコードの問題を修正します。

vue-router-3.1.3/src/components/link.js ファイルを開きます。
以下のコードブロックを探します。

if (scopedSlot) {
  if (scopedSlot.length === 1) {
    return scopedSlot[0];
  } else if (scopedSlot.length > 1 || !scopedSlot.length) {
    if (process.env.NODE_ENV !== "production") {
      warn(
        false,
        `RouterLink with to="${this.props.to}" is trying to use a scoped slot but it didn't provide exactly one child.`
      );
    }
    return scopedSlot.length === 0 ? h() : h("span", {}, scopedSlot);
  }
}

コードを以下のように更新します。

if (scopedSlot) {
  if (scopedSlot.length === 1) {
    return scopedSlot[0];
  } else if (scopedSlot.length > 1 || !scopedSlot.length) {
    if (process.env.NODE_ENV !== "production") {
      warn(
        false,
        `RouterLink with to="${this.to}" is trying to use a scoped slot but it didn't provide exactly one child.`
      );
    }
    return scopedSlot.length === 0 ? h() : h("span", {}, scopedSlot);
  }
}

主な変更点は、警告メッセージで this.props.to が this.to に置き換えられていることです。

修正済みの Vue-Router 3.1.3 を再構築してテストする

このステップでは、vue-router 3.1.3 プロジェクトを再構築し、修正効果をテストします。

ターミナルで vue-router-3.1.3 ディレクトリを開きます。
依存関係をインストールするために npm install コマンドを実行します。このプロセスには時間がかかる場合があるので、しばらくお待ちください。（長時間止まった場合は、Ctrl + C を押してプロセスを終了し、その後再度このコマンドを実行してください。）
すべての依存関係が正常にインストールされた後、npm run build コマンドを実行してプロジェクトを再構築およびリリースします。
VM の上部にある「Web 8080」オプションをクリックし、手動でページを更新します。
ブラウザのコンソールを開き、「TypeError: this.props is undefined」というエラーが表示されなくなっていることを確認します。
修正済みの v-slot API の問題でページが正しくレンダリングされていることを確認します。