How to deal with vue-router3.0 version router.push unable to refresh the page

This time I will bring you how to deal with the vue-router3.0 version router.push that cannot refresh the page. What are the things to note when dealing with the vue-router3.0 version router.push that cannot refresh the page? What are the following? This is a practical case, let’s take a look at it.

Yesterday I found that some

routes could not jump normally. After searching, I found that they were all those places where router.push was 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 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?

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 up

date 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:

Detailed explanation of login verification control steps for React from react-router route

JS implements a simple Detailed explanation of the calculator steps

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