Vue Router に非推奨警告を追加する

はじめに

このプロジェクトでは、vue-router-3.4.9 バージョンの router.addRoutes() メソッドに非推奨警告を追加する方法を学びます。これは重要なタスクです。なぜなら、router.addRoutes() メソッドは Vue Router v3.5.0 で非推奨になり、Vue Router 4 では削除されています。非推奨警告を追加することで、古いバージョンの Vue Router を使用している開発者が近い将来の変更に気付き、新しい router.addRoute() メソッドに移行する手助けをすることができます。

👀 プレビュー

🎯 タスク

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

• vue-router-3.4.9/src/index.js ファイル内の addRoutes メソッドを見つける
• addRoutes メソッドに非推奨警告を追加する
• 更新された vue-router-3.4.9 パッケージを再構築して公開する
• アプリケーションを再起動し、ブラウザのコンソールで警告メッセージを確認する

🏆 成果

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

• ライブラリ内の非推奨メソッドを特定して修正する
• 開発者が新しいバージョンに移行するのを助けるために非推奨警告を提供する重要性を理解する
• ライブラリの更新バージョンを再構築して公開するプロセスを学ぶ
• 実行中のアプリケーションで変更の影響を確認する

router.addRoutes() に非推奨警告を追加する

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

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

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

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

ブラウザのコンソールを開き、警告メッセージがない場合、以下のように表示されることを確認します。

このステップでは、vue-router-3.4.9 バージョンの router.addRoutes() メソッドに非推奨警告を追加する方法を学びます。

1. vue-router-3.4.9/src/index.js ファイルを開きます。

2. VueRouter クラスの addRoutes メソッドを見つけます。

3. 次の警告メッセージをメソッドに追加します。

   addRoutes(routes: Array<RouteConfig>) {
     console.warn("router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.");
     this.matcher.addRoutes(routes);
     if (this.history.current!== START) {
       this.history.transitionTo(this.history.getCurrentLocation());
     }
   }

   これにより、addRoutes() メソッドが呼び出されたときにコンソールに警告メッセージが表示されます。

アプリケーションを再起動して警告を確認する

このステップでは、アプリケーションを再起動し、ブラウザのコンソールに表示される警告メッセージを確認します。

1. ターミナルで vue-router-3.4.9 ディレクトリに移動します。

2. 依存関係をインストールするために npm install コマンドを実行します。このプロセスには時間がかかる場合があるので、しばらくお待ちください。（長時間停止した場合は、Ctrl + C を押してプロセスを終了し、再度このコマンドを実行してください。）

3. すべての依存関係が正常にインストールされたら、npm run build コマンドを実行して、プロジェクトを再構築してリリースします。

4. ブラウザのページに戻り、ページを更新します。

5. ブラウザのコンソールを開き、出力を確認します。コンソールに以下の警告メッセージが表示されるはずです。

   router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.

   これにより、非推奨警告が正常に router.addRoutes() メソッドに追加されたことが確認されます。

おめでとうございます！ vue-router-3.4.9 バージョンの router.addRoutes() メソッドに非推奨警告を追加することで、このプロジェクトを完了しました。

まとめ

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