Solution parfaite pour la version vue-router3.0 router.push impossible d'actualiser la page

Cette fois, je vous apporte la solution parfaite à la version vue-router3.0 router.push qui ne peut pas actualiser la page Quelles sont les précautions pour résoudre le problème de la version vue-router3.0. router.push ne peut pas actualiser la page. Voici ce qui suit. C'est un cas pratique, jetons-y un coup d'œil.

J'ai trouvé le même problème dans vue-router sur github : la version 3.0.1 ne peut pas passer par l'instance du routeur

Hier, j'ai découvert que certaines routes ne pouvaient pas sauter normalement . Après la recherche, j'ai découvert qu'il s'agit de tous les endroits où router.push est utilisé après l'instanciation au lieu d'utiliser this.$router.push 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 au package.json. Ma vue et axios n'ont pas écrit le numéro de version, mais vue-router a clairement écrit le numéro de version 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 npm 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 Si vous pouvez l'utiliser directement dans cette version, vous devriez 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 :

Comment utiliser les gardes de route dans le routage angulaire

Comment implémenter la connexion dans React-Router avec Contrôle de validation React

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!