vue-router3.0版のrouter.pushでページが更新できない場合の対処方法

今回はvue-router3.0版のrouter.pushでページが更新できない場合の対処法をお届けします。以下に実際のケースを示しますので、見てみましょう。 昨日、一部の

ルート

が正常にジャンプできないことを発見しました。検索したところ、それらはすべて、this.$router.pushを直接使用するのではなく、インスタンス化後にrouter.pushが使用されている場所であることがわかりました。 router.push の後に URL が変更されますが、ページは更新されず、適切な画面が表示される前に手動で更新する必要があります。
package.json を見てみました。私の vue と axios はバージョン番号を書き込んでいませんでしたが、vue-router は明らかにバージョン番号を書き込んでいました。なぜ、以前は機能していたのに、現在は機能していないのでしょうか。

その後、npm view vue-router を使用して確認したところ、使用していたバージョンが package.json のバージョンではなくなっていることがわかり、おそらくそれは数日前の npm up

date

だったのではないかと結論付けました。 (今後は安易にアップデートしないでください!)

新しいバージョンが動作しない理由は正確にはわかりません。

最も簡単な解決策は、もちろん、router.push を this.$router.push に直接変更することです

しかし、それが可能であれば、そもそもなぜコンポーネント内で別の Router をインスタンス化する必要があるのでしょうか?

これは明らかに vue ではない場所があるため、vue をインスタンス化してから vue.$router を使用しても問題ありませんか?

答えはもちろんノーです。なぜなら、この vue と他の

場所の

vue は同じ オブジェクトであってはいけないからです。 その後、究極の解決策は次のとおりです:

グローバル vue 内のルーターをウィンドウに追加します。つまり、main.js で使用します:

window.router=router

そうすれば、他の場所でも router.push などを問題なく使用できるようになります。 。

理由の分析:

インスタンス後のルーターがページを更新できないのは、以前のバージョンでは、グローバル vue の this.$router と同じではないためです。このようにシングルトンを使用する必要があります。

シングルトンをもう使用しない理由については、どうすればわかりますか?

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

react-router ルートからの React のログイン検証制御手順の詳細な説明

JS 簡単な計算機を実装する手順の詳細な説明

以上がvue-router3.0版のrouter.pushでページが更新できない場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。