Perfect solution to vue-router3.0 version router.push unable to refresh the page

This time I will bring you the perfect solution to the vue-router3.0 version router.push that cannot refresh the page. The vue-router3.0 version router.push cannot refresh the page. What are the precautions? What are the following? This is a practical case, let’s take a look at it.

Found the same problem in vue-router on github: version 3.0.1 cannot jump through the router instance

Yesterday I found that some routes could not jump normally. After searching, I found that they are all places where router.push is used after instantiation instead of using this.$router.push directly.
What happens is that after router.push, the url changes, but the page does not refresh. You need to refresh it manually before the proper screen appears.

I took a look at the package.json. My vue and axios did not write the version number, but vue-router clearly wrote the version number. How could it be possible that it worked before but not now? What's up?

Then, I used npm view vue-router to check and found that the version I was using was no longer the version in package.json, so I concluded that maybe it was my npm update a few days ago!

(Don’t update casually in the future!)

I don’t know exactly why the new version doesn’t work.

The simplest solution is of course to directly change router.push to this.$router.push

But, if this is possible, why should I instantiate another one in the component in the first place? What about Router?

Obviously because this is not vue in some places, then, is it okay to instantiate a vue and then use vue.$router?

The answer is of course no, because this vue and the vue in other places should not be the same object.

Then, the ultimate solution is:

Add the router in the global vue to the window, and use it in main.js:

window.router=router

Then other You can happily use router.push and other router methods anywhere.

Analysis reason:

The router after the instance cannot refresh the page, probably because it is not the same as this.$router in the global vue, and before In the version, it can be used directly like this, it should be using a singleton.

As for why we don’t use singletons anymore, how do I know this?

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use routing guards in Angular routing

How to implement login in react-router routing with React Verification Control

The above is the detailed content of Perfect solution to vue-router3.0 version router.push unable to refresh the page. For more information, please follow other related articles on the PHP Chinese website!