CODEWITHSUNDEEP
javascriptvue.js
phantom
phantom

Reputation: 1064

Routing history with vuejs

I have a route : https://localhost/search/. I have not used search parameter in the routing parameter in the vuejs client side. The request is send to an api endpoint which is sent as search text and page_no as params and it provides me the result . I watch the parameters of page_no for sending request as we go back and forth on the browser. But the problem is that, when a search text is changed how can I go back from the browser with the particular search text.. I thought of providing search text in front end routing too but I want to avoid that.

Upvotes: 1

Views: 2483

Answers (1)

Morty Choi
Morty Choi

Reputation: 2540

When you navigate to new search result, you should call pushState yourself. Since vue-router will not push another state if the destination route is same as current. Then you need to handle onpopstate event to update your SearchComponet.

window.onpopstate = function(event) {
      alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
    };

history.pushState({query: "a"}, null);

First argument topushState is state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.

Upvotes: 2

Related Questions