We make use of modal component from https://github.com/yuche/vue-strap. When browser back button is clicked, the default behavior is back to previous path but the modal popup isn't closed. How can I change the behavior to close the modal popup upon browser's back button click event?
1 Answers
This helped me.
https://jessarcher.com/blog/closing-modals-with-the-back-button-in-a-vue-spa/
created() {
const backButtonRouteGuard = this.$router.beforeEach((to, from, next) => {
if (from.name == 'menu') {
/* Blocking back button in menu route */
next(false);
this.yourCallBackMethod()
} else {
/* allowing all other routes*/
next(true);
}
});
this.$once('hook:destroyed', () => {
backButtonRouteGuard();
});
},
methods: {
yourCallBackMethod() {
// Go to the previous step, or close the modal
}
},<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>Related