0

I have a Vue 2 app that I'm working on and it kind of works like a search engine - I have a search bar where I can look up any term and when the search runs, results containing that specific term will be displayed.

Now, every result behaves like a link - if I click on it, I will be redirected to a totally different app, which is made in Angular (not sure if this is relevant, I guess you could think only that I navigate to a whole different domain and leave my Vue app).

The issue is that if I click the "back" button in my browser, I will not have the results that I left from, because once I leave my Vue app, its data is deleted.

I was thinking of storing the url containing the search term in local storage and get it when I open the Vue app again, but I don't think this is an option, as it would also behave like this if I refresh the page - moment when I want to have no search query at all.

Please ask for any clarifications needed. Any suggestions on what could be done are appreciated.

Andra
  • 31
  • 4
  • 1
    You could store the search in the url, when the user goes back, the query parameters in the url will still be there, and it also works if the user does F5 – Lk77 Aug 23 '22 at 14:50
  • Does this answer your question? [Detect if page is load from back button](https://stackoverflow.com/questions/37838430/detect-if-page-is-load-from-back-button) – Michael T Aug 23 '22 at 14:55
  • 1
    You could use vue router and store the search parameters in the url. This way the user can also copy the search results and share them with other users. – S.Visser Aug 23 '22 at 14:56
  • @Lk77, this is exactly what I did, so when running the search my url is "http://localhost:8080/searchResults?query=test", for example. But if I navigate to another domain and then back, it will be just "http://localhost:8080/searchResults?query=". Think this is an issue in my vue router? In the router, my path is defined as "{ path: '/searchResults', component: ResultsPage },", and I add the query when running the search: "this.$router.push({ path: "searchResults", query: { query: searchParam } });" – Andra Aug 23 '22 at 15:13
  • Did you push to the history with https://developer.mozilla.org/en-US/docs/Web/API/History/pushState ? when you go back you should have the same url. How do you do the back in the angular app ? You need to use https://developer.mozilla.org/en-US/docs/Web/API/History/back for the back button – Lk77 Aug 23 '22 at 15:18
  • Unfortunately I do not have access in the angular app to make any changes, just the vue one. Would it still be possible to achieve this with pushState? Right now I tried adding this line: "window.history.pushState({}, "", `http://localhost:8080/searchResults?query=${searchParam}`);" and when navigating back from another domain, I can see my query in the url for a split second but then it disappears – Andra Aug 23 '22 at 15:32
  • 1
    Ah I think I got it, I also had to twitch something in my code. It still doesn't work well but I will continue looking into it. Thanks a lot! – Andra Aug 23 '22 at 15:47

0 Answers0