Vue Component Navigation Fails After $router.replace

Solution for Vue Component Navigation Fails After $router.replace
is Given Below:

I have a Vue component where a user can edit or remove items. If the item count ever goes to zero, do a this.$router.replace("routeName") to show the next view.
The issue I’m having is that clicking our built in back button (calls this.$router.go(-1)) or the browser back button (Firefox/Chrome) changes the route in the browser address input, but does not show the expected component in the router view.

It’s behaving a bit inconsistently. There are no javascript errors showing up in the browser dev tools console. Are there any known issues or ideas why this would be the case? We are using this.$router.replace(“routeName”) elsewhere in the application without issue.

Edit: It may be an issue with the browsers and caching? Doing a hard refresh (and deleting the cache) in Chrome, and deleting all cached objects in Firefox seems to resolve the issue.

You might want to use $router.push() instead, because replace() doesn’t add an entry to the history. Therefore the previous route might be a different one than expected which leads to that faulty behaviour.