Currently, I am developing a project using vue.js/vue-router (vue 3, vue-router 4). In this project, there is a slide panel that can be triggered from various views. The panel includes a "close" button to shut it.
To enhance the mobile user experience when the panel is open, I want the panel to close when the navigator's previous button is pressed instead of navigating back through history.
So far, I have experimented with router.beforeEach and am on the verge of finding a solution like the following:
router.beforeEach(async (to, from) => {
if(panel_is_visible) {
// Close the panel if it's visible and prevent transitioning to the new view
functionToCloseThePanel()
return { from };
}
})
The current code almost achieves the desired behavior: pressing the navigator's previous button displays the "from" view, but the URL remains at the previous page... It seems like the "back button" continues to update the URL while the correct view is shown on screen.
Manually specifying the view name in the return statement works correctly (URL and view), but utilizing the "from" variable does not produce the expected results (incorrect URL).
Any insights on how to resolve this issue?