Vue router clear history API when going back from a default view?

Question

I am using the vue-router for overlay menu's on mobile. This means when a user selects a filter link a full overlay will slide in from the left with filters options.

A user can of course select a filter from the default view, go back to the default view and select a filter again. This will cause the history to contain:

• Default view
• Filter view
• Default view
• Filter view

When a user clicks back multiple times it will iterate through the actions in reverse while preferably if there is an overlay active it should go back to the default view and then simply omit the history API data and continue with the default history data.

To get this done I guess I could use named routes and differentiate from a root(default) route between a non-root(overlay). If I want to go back on a root I should then delete the history API data?

Any thoughts on how to get this done?

The browser history can not be manipulated so how do I go back to a state before all the manipulation that has been done by the vue-router?

Solution

Try navigating around the filter views by calling this.$router.replace(). That way, back will take you to the page before default.