I'm working on a vue.js/vue-router project (vue 3, vue-router 4). On this project, I have a slide panel which you can trigger from different views. On this slide panel, there is a "close" button to close it.
In order to improve mobile experience when the panel is open, I would like to close the panel when you hit the navigator's previous button instead of going back in the history.
From now, I've tried things with router.beforeEach, and I'm close to find the solution with something like that :
router.beforeEach(async (to, from) => {
if(panel_is_visible) {
// if the panel is visible, close it and do not go to the "to" view
functionToCloseThePanel()
return { from };
}
})
With this code, the behavior is almost good : after hitting the navigator's prev button, the view is the "from" view, but the url is the one before the "from" view... As if the "back button" still change the url, but the app is displaying the right view.
When I write exactly the name of the view I want inside the return statement, it works (url ok and view ok). But using the "from" variable is not completely working as I expect (url not and view ok).
Do you have any clue ?
I found a solution, I just need to do a return false; as explained here : https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
router.beforeEach(async (to, from) => {
if(panel_is_visible) {
// if the panel is visible, close it and do not go to the "to" view
functionToCloseThePanel()
return false;
}
})