Solve the problem that you cannot perceive by using url vue router in vue

Issues that change url vue router cannot be perceived in vue using vue

describe

Recently, I made a request, but the URL was updated and the page was not refreshed. I found it online. Many articles saidUpdate URL will not refresh the page (provided that the route ishistoryI also used the pattern. At the beginning, there was no problem and I could achieve the requirements, but later the URL became more and more complicated, which would trigger the URL update.mountedExecute, the page will be refreshed and later replacedThe API updates the URL, and the page does not refresh, but it also brings new problems, that is, the vue router cannot sense the changes in the URL. For example,

Assumptions

url：/index?a=1
useUpdate urlthis.$('/index?a=2')
Output fullpath(this.$) => /index?a=2
This result is correct;

If usingThere will be problems when updating the url
use Update url (null,'','/index?a=2');url has indeed been updated,
Output fullpath(this.$) => /index?a=1

in conclusion:this.$routeIt's not updated

How to fix this problem

// This stateObj is actually the object converted into the key value of the query parameterconst stateObj = {
	a:2,
	b:3
}
(stateObj, 'title', '/index?a=2&b=3')
//Clone the original this.$routeconst _route = ({},this.$route);
// Update fullPath_route.fullPath = '/index?a=2&b=3'
// Update parameters_route.params = stateObj
// Just call the update method cb and pass the latest route intothis.$(_route)
// We output fullPath again(this.$) => '/index?a=2&b=3'

The problem is fixed here

In fact, the function of updating URLs using history api was implemented as early as the V3 version. By the way, this was a problem from 5 or 6 years ago. In other words, using history api to updating URL react router can sense URL changes and be recorded, but vue does not, but fortunately there isIf this is returned, otherwise even the gods will not be able to solve this problem. . . .

This is the article about the problem of using and changing url vue router in vue. This is all about this article. For more related vue url vue router content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!