はじめに
このプロジェクトでは、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 ライブラリにおける問題を特定し修正すること
- コード変更を行った後にプロジェクトを再構築すること
- 修正が問題を解決したことをテストし確認すること
問題の修正
始めるには、左側のファイルのディレクトリ構造を以下のように見てください。
├── 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ファイルの問題を修正します。
vue-router-2.5.2/src/components/view.jsファイルを開きます。ファイルの 53 行目を探します。これは
data.registerRouteInstance関数です。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フックが呼び出されることが保証されます。view.jsファイルの変更を保存します。
プロジェクトの再構築とテスト
このステップでは、vue-router-2.5.2プロジェクトを再構築し、修正された結果をテストします。
- ターミナルで
vue-router-2.5.2ディレクトリを開きます。 - 依存関係をインストールするために
npm installコマンドを実行します。このプロセスには時間がかかる場合があるので、しばらくお待ちください。（長時間止まった場合は、Ctrl + Cを押してプロセスを終了し、再度このコマンドを実行してください。） - すべての依存関係が正常にインストールされた後、
npm run buildコマンドを実行してプロジェクトを再構築してリリースします。 - VM 内の「Web 8080」タブを開いて、更新されたアプリケーションを確認します。
- 「to /」、「to /b」、「to /」のボタンをクリックして、問題が修正されたことを確認します。
再訪問時にページが正しいコンテンツを表示するようになります。更新された結果は以下の通りです。
おめでとうございます！vue-router-2.5.2バージョンのコードの問題を正常に修正しました。
まとめ
おめでとうございます！このプロジェクトを完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。
