今回は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 サイトの他の関連記事を参照してください。