再訪時にルートが早すぎてトリガーされる

はじめに

このプロジェクトでは、Vue Router v2.5.2におけるバグを修正する方法を学びます。このバグとは、「アウト・イン」トランジションでルートを再訪問する際に、beforeRouteUpdateのnext()関数が早すぎてトリガーされるものです。

👀 プレビュー

🎯 タスク

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

• vue-router-2.5.2/src/components/view.jsファイルにおける問題を特定し理解する方法
• data.registerRouteInstance関数を更新することで問題を修正する方法
• 修正を加えた状態でvue-router-2.5.2プロジェクトを再構築する方法
• 修正が問題を解決したことを確認するためのテスト方法

🏆 成果

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

• Vue Routerライブラリにおける問題を特定し修正すること
• コード変更を行った後にプロジェクトを再構築すること
• 修正が問題を解決したことをテストし確認すること

Skills Graph

問題の修正

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

├── vue-router-2.5.2
├── vue2.2.6.js
└── index.html

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

次に、VMの上部にある「Web 8080」を開き、手動で更新して以下のようなページの表示を確認します。

• 「to /」をクリックすると、ページには「This is A」が表示されます。
• 「to /b」をクリックすると、ページには「This is B」が表示されます。
• 再度「to /」をクリックすると、ページには「This is」が表示されます。

このステップでは、vue-router-2.5.2/src/components/view.jsファイルの問題を修正します。

1. vue-router-2.5.2/src/components/view.jsファイルを開きます。

2. ファイルの53行目を探します。これはdata.registerRouteInstance関数です。

3. data.registerRouteInstance関数を以下のように更新します。

   data.registerRouteInstance = (vm, val) => {
     // valは登録解除時に未定義になる場合があります
     var current = matched.instances[name];
     if ((val && current !== vm) || (!val && current === vm)) {
       matched.instances[name] = val;
     }
   };

   ここでの変更は、valとmatched.instances[name]が異なるか、またはvalが偽でmatched.instances[name]がvmと同じかどうかを確認することです。これにより、インスタンスが実際に変更されたときにのみregisterRouteInstanceフックが呼び出されることが保証されます。

4. view.jsファイルの変更を保存します。

プロジェクトの再構築とテスト

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

1. ターミナルでvue-router-2.5.2ディレクトリを開きます。
2. 依存関係をインストールするためにnpm installコマンドを実行します。このプロセスには時間がかかる場合があるので、しばらくお待ちください。（長時間止まった場合は、Ctrl + Cを押してプロセスを終了し、再度このコマンドを実行してください。）
3. すべての依存関係が正常にインストールされた後、npm run buildコマンドを実行してプロジェクトを再構築してリリースします。
4. VM内の「Web 8080」タブを開いて、更新されたアプリケーションを確認します。
5. 「to /」、「to /b」、「to /」のボタンをクリックして、問題が修正されたことを確認します。

再訪問時にページが正しいコンテンツを表示するようになります。更新された結果は以下の通りです。

おめでとうございます！vue-router-2.5.2バージョンのコードの問題を正常に修正しました。

まとめ

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