Comment gérer la version vue-router3.0 router.push incapable d'actualiser la page

Cette fois, je vais vous expliquer comment gérer la version router.push de vue-router3.0 qui ne peut pas actualiser la page. Quelles sont les précautions pour gérer la version routeur de vue-router3.0. .push qui ne peut pas actualiser la page ? Voici ce qui suit : C'est un cas pratique, jetons-y un coup d'œil.

Hier, j'ai découvert que certains itinéraires ne pouvaient pas sauter normalement. Après avoir cherché, j'ai découvert qu'il s'agissait de tous ces endroits où router.push était utilisé après l'instanciation au lieu d'utiliser this.$router. pousser directement.
Ce qui se passe, c'est qu'après router.push, l'URL change, mais la page ne s'actualise pas. Vous devez la rafraîchir manuellement avant que l'écran approprié n'apparaisse.

J'ai jeté un œil à package.json. Ma vue et axios n'ont pas écrit les numéros de version, mais vue-router l'a clairement fait. Comment est-il possible que cela fonctionne avant mais pas maintenant ?

Ensuite, j'ai utilisé npm view vue-router pour vérifier et j'ai découvert que la version que j'utilisais n'était plus la version de package.json, j'ai donc conclu que c'était peut-être ma mise à jour npmdate il y a quelques jours !

(Ne mettez pas à jour avec désinvolture à l'avenir !)

Je ne sais pas exactement pourquoi la nouvelle version ne fonctionne pas.

La solution la plus simple est bien sûr de changer directement router.push par this.$router.push

Mais, si cela est possible, pourquoi devrais-je en instancier un autre dans le composant en premier endroit ? Qu'en est-il du routeur ?

Évidemment, parce que ce n'est pas vue à certains endroits, est-il acceptable d'instancier une vue puis d'utiliser vue.$router ?

La réponse est bien sûr non, car cette vue et la vue dans d'autres endroits ne devraient pas être le même objet.

Ensuite, la solution ultime est :

Ajoutez le routeur dans la vue globale de la fenêtre, et utilisez-le dans main.js :

window.router=router

Ensuite, vous pouvez utilisez volontiers router.push et d’autres méthodes de routeur partout ailleurs.

Raison de l'analyse :

Le routeur après l'instance ne peut pas actualiser la page, probablement parce que ce n'est pas le même que celui-ci.$routeur dans la vue globale, mais avant Cette version peut être utilisée directement, elle doit utiliser un singleton.

Quant à savoir pourquoi vous n’utilisez plus de singletons, comment puis-je le savoir ?

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes de contrôle de vérification de connexion pour React à partir de la route React-Router

JS à implémenter une simple explication détaillée des étapes de la calculatrice

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!