Dynamically change the url-history object

An optimization request received last week echoed some user operations on the page in the url.

The initial consideration was to use the dynamic routing in vue, and enter a route through vue router push, but later found that changing the route through vue router would involve refreshing the current page. This kind of refreshing will reduce the user experience, so the method of changing the route by vue router cannot be adopted.

Finally, I found the replacestate method in the history object under window to change the current url.

History object: refer to the history API of mdn:

History API - Web API interface reference | MDN

Among them, the pushstate and replacestate methods are new methods in h5.

history.replaceState() The use of  history.pushState() is very similar to , the difference is replaceState() that the current history entry is modified instead of creating a new one. Note that this does not prevent it from creating a new history entry in the global browser history.

replaceState() The usage scenario is that in response to user actions, you want to update the state object state or the URL of the current history record.

The usage scenario of replacestate is to update the url of the current historical record in response to user operations. Fits our needs. So just use this.