CODEWITHSUNDEEP
javascripthtml
Alex
Alex

Reputation: 375

back button not working properly (chrome)

I have a request axios(vue):

.then(response => {
  history.pushState(null, null, response.request.responseURL);
}

Standart URL - http://localhost:30/shop. With this line, I complete the URL. in the end it will look like: http://localhost:30/shop?tags[]=5

But when I go to another page (http://localhost:30/shop/parts/2123 ) and then click the back button. Then I see not the page, but the response of the request (just text).

How i can resolve this problem?

upd: with FF working fine. Only when using google chrome.

Upvotes: 1

Views: 1888

Answers (1)

code
code

Reputation: 6329

What history.pushState does is change the value of the URL in the search bar and push a new URL to browser history; it does not change anything in the DOM. The browser doesn't take "screenshots" of your current page state, so when you go back it only changes the URL on the address bar and the history, but no UI changes.

Based on your code an post, I believe you wanted to redirect the user, which is done easily with:

window.location.href = response.request.responseURL;

Edit

Based on your comment, you can use history.replaceState instead of pushState, which won't add changes to history, thus not breaking the back button:

history.replaceState(null, null, response.request.responseURL);

Upvotes: 1

Related Questions