vue-router3.0 バージョンの router.push がページを更新できない場合の完璧な解決策

今回は、vue-router3.0バージョンのrouter.pushがページを更新できない問題を解決するための注意事項を紹介します。以下は実際の事例ですので、一緒に見ていきましょう。

github の vue-router でも同じ問題を見つけました: バージョン 3.0.1 ではルーター インスタンスをジャンプできません

昨日、いくつかの ルート が正常にジャンプできないことが分かりました。検索したところ、それらはすべて を使用していることがわかりました。 this.$router.push を直接使用する代わりに、インスタンス化後のルーター。
router.push の後に URL が変更されますが、ページは更新されず、適切な画面が表示される前に手動で更新する必要があります。

package.json を見てみました。私の vue と axios はバージョン番号を書き込んでいませんでしたが、vue-router は明らかにバージョン番号を書き込んでいましたが、今はそうではないのはなぜでしょうか。

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

(今後は安易にアップデートしないでください!)

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

最も簡単な解決策は、もちろん、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 サイトの他の関連記事に注目してください。

推奨読書:

Angularルーティングでルートガードを使用する方法

Reactがreact-routerルーティングでログイン検証制御を実装する方法

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