What is my goal? I am looking to store the user's current position on the page so that when they navigate to another page and use the browser's "Back" button, they are taken back to that position. This behavior should only be triggered when the user specifically clicks the browser's back button.
How am I attempting to accomplish this? I have been using a method to replace the state when a user clicks on a link. This method redirects the page to the correct location.
window.history.replaceState({ scrollToProduct: true, productCode: 'product-XXXX' }, document.title, `${window.location.href}?product-code=product-XXXX`);
I have also been trying to set up a popstate listener in my App.vue file
beforeMount() {
window.onpopstate = function(e) {
console.log(e);
};
}
What issue am I encountering? Unfortunately, the popstate listener is not being properly attached, so I cannot capture the click of the "Back" button.
I have also attempted using router.push.
this.$router.push({ name: 'NameOfComponent' });
Interestingly, when I navigate to another page (without a page reload) and then click the back button, the popstate does work. However, I am unable to pass any information into the history state.
Can anyone provide assistance with this issue?
PS: It is worth noting that I am not using a Single Page Application (SPA), but rather refreshing on each page load.