I am currently exploring the option of creating a back button in my Vue.js application using vue-router that mimics the behavior of the browser's native back button. The challenge I'm facing is that when using history mode for the router and trying to go back programmatically with this.$router.go(-1), it ends up refreshing the page, unlike how the browser's back button functions. Removing history mode resolves the refresh issue but introduces unsightly hashtags in the URL. Additionally, limiting the custom back button functionality to certain pages while maintaining history mode poses its own set of challenges as it interferes with the browser's built-in back navigation.
Is there a way to implement a back button that mirrors the behavior of the browser's back button without causing page refreshes, avoiding hashtags in the URL, and seamlessly integrating with the browser's natural back navigation?
EDIT: Initially considered removing this post after realizing the issue was related to testing rather than the code itself. However, decided to keep it here in case it might be beneficial to others. It turned out that directly entering a route URL instead of navigating from another page caused a reset of stored states, thus impacting the effectiveness of the custom back button. Navigating to the desired page from another location solved the problem and restored the expected functionality of the back button.