はじめに
このプロジェクトでは、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 - スロット 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の問題でページが正しくレンダリングされていることを確認します。
問題が修正された後の効果の画像を以下に示します。
まとめ
おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために、LabEx でさらに多くの実験を行うことができます。
